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安装,然后按照相关配置说明配置命令行路径,推荐全局安装;
- 该插件依赖系统命令,Mac系统可使用brew安装
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"
}
另外 .vscode/launch.json
文件可用于配置启动命令相关。
快捷键
详见 Macos系统下vscode快捷键说明