VSCode搭建开发环境--从PyCharm到拥抱vscode

VSCode搭建开发环境

前言
安装扩展
全局配置文件
单个项目的配置
快捷键

前言

最近自己的PyCharm Professional的License过期了，导致没有一个好的开发IDE，于是开始拥抱免费的Visual Studio Code啦。

当然，不可否认的是PyCharm对于开发Python来说还是非常好用的，特别是Professional版本。

由于本人不仅写Python，也写一些前端代码，PyCharm或者WebStorm来写前端都导致电脑很卡，特别吃内存。

于是趁此机会拥抱vscode，一方面因为免费，另外vscode有很多扩展(Extensions)，能支持多语言的开发，非常方便。

vscode官网下载

vscode主要是安装扩展，然后就是各种配置项，以满足个人的自定义需求。

安装扩展

在这里插入图片描述
推荐可以安装如下扩展：

Python 导入Python项目会自动识别，IDE会主动推荐安装扩展；
autoDocstring 用于自动生成注释文档的，支持很多风格文档的定义；
Flake8 或者 pylint 用于代码风格检查；若两个都安装了，开启一个使用即可；
- 该插件依赖系统命令，Mac系统可使用brew安装 brew install flake8 或者 brew install pylint ；
- 否则无法生效，或者pip安装，然后按照相关配置说明配置命令行路径，推荐全局安装；
Prettier 可用于格式化代码
GitLens 用于git管理
ESLint 前端代码检查
- 依赖eslint命令，推荐全局安装；
- 也可在项目当前目录下通过package.json配置安装；

以上所有插件都可以通过界面配置，当然也可以通过command + , 快捷方式打开：
在这里插入图片描述

其中git扩展还提供了自己的UI管理界面：command + shift + p 打开搜索：

例如我取消了类上面git blame相关的信息提示：

全局配置文件

在这里插入图片描述

全局配置文件通过json编辑，这里给出配置示例，至于含义可自行搜索一下：

settings.json

{
  // 开启自动保存
  "files.autoSave": "afterDelay",
  "[markdown]": {
    "diffEditor.ignoreTrimWhitespace": true
  },
  // 设置Google风格的文档
  "autoDocstring.docstringFormat": "google-notypes",
  "python.diagnostics.sourceMapsEnabled": true,
  // python代码检查的设置
  "pylint.args": ["--disable=C0111", "--max-line-length=120"],
  "flake8.args": ["--max-line-length=120", "--exclude=migrations", "--ignore=E203,E503,W503"],
  // 排除在ide内不展示的目录
  "files.exclude": {
    "**/__pycache__": true,
    "**/.idea": true,
    "**/vendor": true
  },
  // 自动化格式代码配置，看需要根据语言打开
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "prettier.arrowParens": "avoid",
  "prettier.printWidth": 512,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.workingDirectories": ["./frontend"],
  "git.openRepositoryInParentFolders": "always",
  "[python]": {
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.formatOnType": true,
    "editor.wordBasedSuggestions": "off"
  },
  // 用于出现中文
  "editor.unicodeHighlight.allowedLocales": {
    "zh-hans": true
  },
  // git blame 的格式显示
  "gitlens.blame.format": "${author|12} ${message|30?} ${agoOrDate|14-}",
  // git blame不显示头像
  "gitlens.blame.avatars": false,
  // 自动去掉行末的空格
  "files.trimTrailingWhitespace": true,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "gitlens.codeLens.enabled": false,
  // 不自动根据打开的文件定位到菜单
  "explorer.autoReveal": "focusNoScroll",
  // 菜单文件树目录的缩进
  "workbench.tree.indent": 16
}

keybindings.json

// 将键绑定放在此文件中以覆盖默认值
[
    {
        "key": "shift+cmd+u",
        "command": "-workbench.action.output.toggleOutput",
        "when": "workbench.panel.output.active"
    },
    {
        "key": "shift+cmd+u", // 切换大写
        "command": "editor.action.transformToUppercase"
    },
    {
        "key": "cmd+u",  // 切换小写
        "command": "editor.action.transformToLowercase"
    }
]

单个项目的配置

放在项目根目录下，新建文件夹.vscode , 里面可以用于放配置文件覆盖全局配置。
.vscode/settings.json

{
	// 设置前端目录路径
    "eslint.workingDirectories": [
        "./frontend"
    ],
   	// 设置python后端目录路径
    "python.analysis.extraPaths": [
        "./backend"
    ],
    "flake8.cwd":"${workspaceFolder}/backend"
}