markdown [vscode配置笔记]＃学习笔记#vscode应用

Posted 2021-05-05

# [vscode 配置笔记]#学习笔记 #vscode应用

## **学习笔记**

### 使用 vscode 搭建 python+django 开发环境

- [1] 安装 vscode

  > 下载地址: <https://code.visualstudio.com/>

- [2] 安装 插件 > 1.Chinese (Simplified) Language Pack for Visual Studio Code :汉化界面插件

  > 2.vscode-icons :文件图标主题  
  > 3.Son of Obsidian Theme :颜色主题  
  > 4.Python :Python 语法的基本插件  
  > 5.django snippets :Django 的应用插件  
  > 6.Django Template :Django 的模板插件  
  > 7.XML Tools :整个 VSCode 都会用到的插件，运维配置 VSCode 需要  
  > 8.Beautify :前端美化  
  > 9.View In Browser :浏览器快捷打开前端页面  
  > 10.HTML CSS Support :HTML 基础插件  
  > 11.Path Intellisense :路径补全插件

- [3] 配置调试

  > 转到调试栏,新安装的 vscode 应该显示`没有配置`,点击倒三角选择`添加配置`,这个时候在右侧会弹出一个对话框,选择`Python`即可,这样就会打开一个文件名为`launch.json`配置文件.
  > 返回到项目导航栏,这时候会出现一个文件夹`.vscode`两个文件`launch.json` `settings.json`,打开`launch.json`文件配置自己的调试参数,可以从参数`Python: Django`复制一个进行修改,`**注意!将"console"项改为"none"**`,打开`settings.json`,在里面添加 python 路径 :`"python.pythonPath": "/usr/bin/python2.7",`

- [4] 安装相关包

  > ```bash
  > pip install pylint
  > pip install yapf
  > pip install pylint_django
  > ```

- [5] 配置`settings.json`

  > ```json
  > {
  >   "python.pythonPath": "/usr/bin/python2.7",
  >   "python.formatting.provider": "yapf",
  >   "python.linting.pylintArgs": ["--load-plugins", "pylint_django"]
  > }
  > ```

- [6] 配置格式化

  > 1.安装扩展程序:
  >
  > > a.ESLint
  > > b.Prettier - Code formatter  
  > > c.Vetur

  > 2.配置`settings.json`
  >
  > > ```json
  > > {
  > >   "files.autoGuessEncoding": true,
  > >   "vsicons.dontShowNewVersionMessage": true,
  > >   "files.autoSave": "afterDelay",
  > >   "editor.fontSize": 16,
  > >   "explorer.confirmDragAndDrop": false,
  > >   "extensions.autoUpdate": false,
  > >   "editor.fontFamily": "Consolas, Dengxian",
  > >   "workbench.sideBar.location": "left",
  > >   "workbench.startupEditor": "newUntitledFile",
  > >   "python.pythonPath": "/usr/bin/python2.7",
  > >   "python.formatting.provider": "yapf",
  > >   "python.linting.pylintArgs": ["--load-plugins", "pylint_django"],
  > >   "explorer.confirmDelete": false,
  > >   "workbench.iconTheme": "vscode-icons",
  > >   "workbench.colorTheme": "Son of Obsidian",
  > >   "git.confirmSync": false,
  > >   "git.enableSmartCommit": true,
  > >   "git.autofetch": true,
  > >   // tab 大小为 2 个空格
  > >   "editor.tabSize": 2,
  > >   // 100 列后换行
  > >   "editor.wordWrapColumn": 100,
  > >   // 保存时格式化
  > >   "editor.formatOnSave": true,
  > >   // 开启 vscode 文件路径导航
  > >   "breadcrumbs.enabled": true,
  > >   // prettier 设置语句末尾不加分号
  > >   "prettier.semi": false,
  > >   // prettier 设置强制单引号
  > >   "prettier.singleQuote": true,
  > >   // 选择 vue 文件中 template 的格式化工具
  > >   "vetur.format.defaultFormatter.html": "prettyhtml",
  > >   // 显示 markdown 中英文切换时产生的特殊字符
  > >   "editor.renderControlCharacters": true,
  > >   // 设置 eslint 保存时自动修复
  > >   "eslint.autoFixOnSave": true,
  > >   // eslint 检测文件类型
  > >   "eslint.validate": [
  > >     "javascript",
  > >     "javascriptreact",
  > >     {
  > >       "language": "html",
  > >       "autoFix": true
  > >     },
  > >     {
  > >       "language": "vue",
  > >       "autoFix": true
  > >     }
  > >   ],
  > >   // vetur 的自定义设置
  > >   "vetur.format.defaultFormatterOptions": {
  > >     "prettier": {
  > >       "singleQuote": true,
  > >       "semi": false
  > >     }
  > >   }
  > > }
  > > ```