vscode配置vue3+python开发环境
vscode配置vue3+python开发环境
说明
推荐使用vscodium,没有用户追踪,下载VSCodium-win32-x64.zip，设置采用微软官方扩展源就是vscode了，设置方法如下
修改安装根目录/resources/app/product.json文件中的extensionsGallery键对应的值如下：
"extensionsGallery": {
"serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
"itemUrl": "https://marketplace.visualstudio.com/items"
}
重启vscodium。扩展里就可以搜索安装微软官方扩展源里的扩展。
安装
普通安装
windows
下载：https://code.visualstudio.com/Download
选择【system Installer 64bit】版本，安装总是下一步就好。
迁移到离线环境
如果是便携版直接复制粘贴即可，如果是安装版按以下方法迁移：
- 在外网的台式机上安装好VSCode，并安装好需要用到的插件。
- 拷贝
C:\Users\用户名称\AppData\Local\Programs目录下的Microsoft VS Code目录 - 拷贝
C:\Users\用户名目录下的.vscode文件夹 - 将2文件夹复制到内网电脑对应的位置上，就可以使用了。
便携版安装（推荐）
在便携版的code.exe同级目录创建data目录，并在data目录内创建tmp目录即可，以后将该便携版文件夹拷贝就可以了
注意：如果装过vscode要彻底删除，方法是：
- win + R 打开运行窗口，在输入框中输入%appdata%，删除code文件夹
- win + R 打开运行窗口，在输入框中输入%userprofile%，删除 .vscode 文件夹
常规设置
显示tab符和空字符
打开setting,在搜索框中输入renderControlCharacters,选中勾选框,即可显示tab. 在搜索框中输入renderWhitespace,选择all,即可显示空格.
设置大小写转换的快捷键
- 文件>首选项>键盘快捷方式
- 输入 “转换为大写”, 会出现搜索结果【转换为大写】,鼠标悬停在该结果上, 点击前面的”加号” 或 双击, 会弹出输入自定义快捷键的弹窗。
- 在键盘上面按下Ctrl、Shift和u, 然后按Enter键, 即可成功绑定转换为大写快捷键。
4.同理，搜索”转换为小写”, 鼠标悬停在结果上, 点击前面的”加号” 或 双击, 弹出设置快捷键的弹窗，在键盘上面按下Ctrl、Shift和l, 然后按Enter键, 即可成功绑定转换为小写快捷键。最终设置的自定义的大小写转换快捷键如下:
转换为大写: Ctrl+Shift+u
转换为小写: Ctrl+Shift+l
常用插件
基础插件
1. 中文语言包 ，Chinese (Simplified)
2. 主题皮肤 material theme
搜索material theme安装—>点【文件】—>【首选项】—>【主题颜色】—>【material theme】
3.文件图标 Material Icon Theme
4. 方便看到代码的缩进 indent-rainbow
5. 主题（推荐） One Dark Pro
6. 调试插件 Code Runner
代码一键运行，支持超过40种语言
6.1.代码一键运行 安装好Code Runner之后，打开你所要运行的文件，有多种方式来快捷地运行你的代码：
- 键盘快捷键 Ctrl+Alt+N
- 快捷键 F1 调出 命令面板, 然后输入 Run Code
- 在编辑区，右键选择 Run Code
- 在左侧的文件管理器，右键选择 Run Code
- 右上角的运行小三角按钮
6.2.停止代码运行
如果要停止代码运行，也有如下几种方式：
- 键盘快捷键 Ctrl+Alt+M
- 快捷键 F1 调出 命令面板, 然后输入 Stop Code Run
- 在Output Channel，右键选择 Stop Code Run
6.3.运行指定代码
- 选中要运行的代码，右键Run Code
6.4.乱码问题
- 打开设置——>扩展——>Run Code configuration——>找到Run In Terminal打钩
- 打开设置，setting.json中设置加入
"terminal.integrated.shellArgs.windows": ["/K chcp 65001 >nul"],
7. 万能代码补全 Tabnine AI Autocom
8. 项目管理 Project Manager
（1）command+ shift + p打开配置文件， 输入 Project Manager: Edit Projects
[
{
"name": "nuxtest",
"rootPath": "/Users/tianer/WebstormProjects/sales-crm-web",//添加你的本地项目
"paths": [],
"group": ""
},
{
"name": "vuetest",
"rootPath": "/Users/tianer/WebstormProjects/sales-crm-web",//添加你的本地项目
"paths": [],
"group": ""
}
]
9. 翻译 翻译(英汉词典)
前端插件
vue
1. vue3支持 Vetur
语法高亮、智能感知、Emmet等 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
2.代码规范 EsLint
检查js、html、css代码，确保它们符合规范，并且代码风格保持一致性，强制性的规则，你少写一个空格或者多敲一个回车都会被严格的指出来，在vue-cli生成的项目帮我们把配置都生成好了，在使用vue-cli生成webpack项目时会询问是否启用eslint并且使用哪套规范，选择Standard规范就行:
3. 格式化代码 Prettier - Code formatter
在设置中把在保存时格式化文件勾上，就可以ctrl+s保存后格式化文件
"prettier.printWidth": 120,,// 最大换行长度
"prettier.tabWidth": 2, // 保存后缩进单位
"[html][css][less][scss][javascript][typescript][json][jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",//设置prettier为默认格式化程序
"editor.tabSize": 2// 编辑时缩进单位
},
eslint与prettier配置
{
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.workingDirectories": [
{"mode": "auto"}
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue"
]
}
4. 自动闭合HTML/XML标签 Auto Close Tag
5. ES6语法智能提示 JavaScript(ES6) code snippets
ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
6.让 html 标签上写class HTML CSS Support
智能提示当前项目所支持的样式
7. 生成vue的模板代码 vue VSCode Snippets
8. 代码提示插件 vue-helper
9. Element Plus的代码提示插件 Element Plus Plus
10. 浏览器实时刷新 Live Serve
11. 格式化JS，CSS，HTML，JSON文件：JS-CSS-HTML Formatter
快捷键：Alt+Shift+F
12. 代码片段 Vue3 Snippets
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features" //保存js文件时同样格式化
},
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
// "prettier.eslintIntegration": true,
// // #去掉代码结尾的分号
// "prettier.semi": true,
// // #使用带引号替代双引号
// "prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// "wrap_attributes": "force-aligned",
"wrap_attributes": "auto",
// #vue组件中html代码格式化样式
"prettier": {
// 格式化不加分号
"semi": false,
// 格式化为单引号
"singleQuote": true
}
}
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
后端插件
python
1.代码校验及风格化
1.base环境下安装flake8#pip install flake8
2.base环境下安装#conda install yapf
在setting.json中配置
"python.linting.enabled": true,
"python.linting.pylintEnabled": false,
"python.linting.flake8Enabled": true,
"python.formatting.provider": "yapf",
如果装了 pylint 的话，要设置其 Enabled = false，否则不用。
79 个字符实在是太短了，我们可以把它改长一点，增加如下配置，把最大长度设为 128 个字符。
"python.linting.flake8Args": ["--max-line-length=128"],
2. python开发插件 Python
3. python代码自动缩进 Python Indent
4. python语言包 Python
5. 代码补全 Visual Studio IntelliCode
IntelliCode使用的引擎有两种，默认使用Microsoft Python Analysis Engine，每次进入一个Python工作空间的时候，就会看见下面显示正在加载，一般还会加载很久，受不了的朋友可以在.vscode/settings.json中设置
"python.jediEnabled": true,
如果你有一些额外的包需要加入到自动补全中，可以通过如下设置来实现。
"python.autoComplete.extraPaths": "你的包路径"
问题处理
- python第三方库补全
把site-packages，Scripts第三方库的目录配置到python.autoComplete.extraPaths里面，然后禁用或卸载Pylance插件。
// ===========================第三方库代码补全==============================
"python.autoComplete.extraPaths": [
"D:\\opt\\Anaconda3\\envs\\flask\\Lib\\site-packages",
"D:\\opt\\Anaconda3\\envs\\flask\\Scripts",
],
其他
1. VBA支持 VSCode VBA
2. excel支持 Excel Viewer
3. uml支持 PlantUML
总配置文
{
// =======================基础配置文===================================
// 系统主题
"workbench.colorTheme": "One Dark Pro",
// 图标主题
"workbench.iconTheme": "material-icon-theme",
// 显示tab符
"editor.renderControlCharacters": true,
// 显示空格
"editor.renderWhitespace": "all",
// 字号
"editor.fontSize": 18,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 在一定数量的等宽字符后显示垂直标尺。输入多个值，显示多个标尺。若数组为空，则不绘制标尺。
"editor.rulers": [80],
//一个制表符等于的空格数。该设置在`editor.detectIndentation`
"editor.tabSize": 4,
// #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
"editor.formatOnSave": true,
// 边导航放在右边
"workbench.sideBar.location": "right",
// 括号颜色
"editor.bracketPairColorization.enabled": true,
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#ffd700",
"editorBracketHighlight.foreground2": "#da70d6",
"editorBracketHighlight.foreground3": "#87cefa",
"editorBracketHighlight.foreground4": "#ffd700",
"editorBracketHighlight.foreground5": "#da70d6",
"editorBracketHighlight.foreground6": "#87cefa",
"editorBracketHighlight.unexpectedBracket.foreground": "#ff0000"
},
// end括号颜色
// 解决code runner乱码问题
"code-runner.runInTerminal": true,
// =======================基础配置文===================================
// ====================python 配置文====================================
/*先安装anaconda发行库，在anaconda发行库的主python上用pip install 安装flake8、yapf
在扩展商店上安装anaconda、m-python.python**/
// 代码检查flake8
"python.linting.pylintEnabled": false, //关闭系统自带的校验工具
"python.linting.flake8Enabled": true, //使用flake8
// anaconda主python上的flake8路径
"python.linting.flake8Path": "D:\\opt\\Anaconda3\\Scripts\\flake8",
// 每行字符数
"python.linting.flake8Args": ["--max-line-length=120"],
// python代码格式化
"python.formatting.provider": "yapf", //指明python格式化工具用yapf
"python.formatting.yapfPath": "D:\\opt\\Anaconda3\\Scripts\\yapf", //yapf的路径
// 每行字符数
"python.formatting.yapfArgs": ["--style", "{column_limit: 120}"],
// ===========================第三方库代码补全==============================
"python.autoComplete.extraPaths": [
"D:\\opt\\Anaconda3\\envs\\flask\\Lib\\site-packages",
"D:\\opt\\Anaconda3\\envs\\flask\\Scripts"
],
// ===========================第三方库代码补全==============================
// ====================python 配置文====================================
// =======================前端代码格式化===========================
/*须安装ESlint、vetur、Prettier **/
// #每次保存的时候将代码按eslint格式进行修复
// 添加 vue 支持
// #让prettier使用eslint的代码格式进行校验
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue"
],
// #让prettier使用eslint的代码格式进行校验
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
"prettier.tabWidth": 4,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.workingDirectories": [{ "mode": "auto" }],
"prettier.useTabs": true,
"files.autoSave": "off",
"explorer.confirmDelete": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"[python]": {
"editor.defaultFormatter": "ms-python.python"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"python.analysis.extraPaths": [
"D:\\opt\\Anaconda3\\envs\\flask\\Lib\\site-packages",
"D:\\opt\\Anaconda3\\envs\\flask\\Scripts"
], // 两个选择器中是否换行
// ========================前端代码格式化=============================
// ========================golang============================
"go.useLanguageServer": true,
"tabnine.experimentalAutoImports": true,
"workbench.startupEditor": "none"
// ========================golang============================
}
使用技巧
快捷键
1. 注释：
- 单行注释： ctrl+k,ctrl+c]或 ctrl+/
- 取消单行注释： ctrl+k,ctrl+u (按下ctrl不放，再按k + u)
- 多行注释： alt+shift+A
- 多行注释： /**
2. 移动行： alt+up/down
3. 显示、隐藏左侧目录栏 ctrl + b
4. 复制当前行：shift + alt +up/down
5. 删除当前行：shift + ctrl + k
6. 控制台终端显示与隐藏：ctrl + ~
7. 查找文件/安装VS Code插件地址：ctrl + p
8. 代码格式化：shift + alt +f
9. 新建一个窗口 : ctrl + shift + n
10. 行增加缩进: ctrl + [
11. 行减少缩进: ctrl + ]
12. 拓展管理 : ctrl + shift + x
13. 字体放大/缩小: ctrl + ( + 或 - )
14. 拆分编辑器 : ctrl + 1/2/3
15. 切换窗口 : ctrl + shift + left/right
16. 关闭编辑器窗口 : ctrl + w
17. 关闭所有窗口 : ctrl + k + w
18. 切换全屏 : F11
19. 自动换行 : alt + z
20. 显示git : ctrl + shift + g
**21. 全局查找文件：**ctrl + shift + f
22. 显示相关插件的命令(如：git log)：ctrl + shift + p
23. 选中文字：shift + left / right / up / down
24. 折叠代码： ctrl + k + 0-9 (0是完全折叠)
25. 展开代码： ctrl + k + j (完全展开代码)
26. 删除行 ： ctrl + shift + k
27. 快速切换主题：ctrl + k / ctrl + t
28. 快速回到顶部 ： ctrl + home
29. 快速回到底部 : ctrl + end
30. 格式化选定代码 ：ctrl + k / ctrl +f
31. 选中代码 ： shift + 鼠标左键
32. 多行同时添加内容（光标） ： ctrl + alt + up/down
33. 全局替换： ctrl + shift + h
34. 当前文件替换： ctrl + h
35. 打开最近打开的文件： ctrl + r
36. 打开新的命令窗： ctrl + shift + c
37. 资源管理器 ： Ctrl + Shift + E
同时进行多行的编辑
如果要插入/删除多个相同文本的实例，可以创建一个多光标(Multiple cursor)。按住 Alt按键，然后每点击一次，光标就在当前位置停住。每一次点击创建一个新的光标，就可以同时编辑这些位置。
查看函数或者类的定义
Ctrl+鼠标左键点击函数名或者类名即可跳转到定义处，在函数名或者类名上按F12也可以实现同样功能
更改变量名
在变量名上按F2即可实现重命名变量
python断点调试
在行号的左边点击即可设置断点，在左边的调试界面可以查看变量的变化
隐藏菜单栏
这个属于个人习惯，如果你也感觉菜单栏很碍眼，可以点击查看->切换菜单栏，即可隐藏菜单栏。需要菜单栏的时候按Alt键即可查看
设置快捷键
文件->首选项->键盘快捷方式，将需要的修改的快捷键的整个大括号里面的内容复制到右边keybindings.json文件中，然后修改“key”的值为你需要的快捷键即可。我这边只修改了复制一行和删除一行的快捷键。