vscode配置vue3+python+go开发环境

ldlhyy7

已于 2024-02-12 21:48:29 修改

阅读量1.5k

点赞数

分类专栏： dev tools 文章标签： vscode python ide

于 2022-08-26 19:53:12 首次发布

本文链接：https://blog.csdn.net/ldlhyy7/article/details/126549470

版权

dev tools 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

说明

一般使用vscodium,这个没有用户追踪,下载VSCodium-win32-x64.zip点show all 116 asstes,下载对应的版本，设置采用微软官方扩展源就是vscode了，设置方法如下
修改安装根目录/resources/app/product.json文件中的extensionsGallery键对应的值如下：

"extensionsGallery": {
    "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
    "itemUrl": "https://marketplace.visualstudio.com/items"
}

重启vscodium。扩展里就可以搜索安装微软官方扩展源里的扩展。
注意：win与linux设置方法一样

安装

windows便携版安装

1.下载VSCodium-win32-x64.zip点show all 116 asstes,下载win32-x64.zip的版本
2.在便携版的code.exe同级目录创建data目录，并在data目录内创建tmp目录即可，以后将该便携版文件夹拷贝就可以了
注意：如果装有vscode要彻底删除，方法是：

win + R 打开运行窗口，在输入框中输入%appdata%，删除code文件夹
win + R 打开运行窗口，在输入框中输入%userprofile%，删除 .vscode 文件夹

Linux下便携版安装

1.在官网下载【VSCodium-linux-x64-版本号.tar.gz】包，在下载目录解压，然后在解压的根目录中创建data文件夹并将解压目录移动到/opt目录下。
2.创建桌面快捷方式
2.1.在桌面打开终端

vim VSCodium.desktop   ##创建VSCodium.desktop文件并进入编辑界面

2.2.点击i进入编写模式，写入以下内容,然后按【esc】再输入:wq!即可（以下代码保存时需要把括号及括号中的中文字符去除）

[Desktop Entry]    (这行必须存在，笔者亲测把它注释掉后就会提示Broken Desktop File，即已损坏的桌面文件。）
Name=VSCodium    (该快捷方式的名称）
Comment=VSCodium shortcut    （对该文件的注释）
Exec=/opt/VSCodium/Documents/ProgramFiles/pycharm-2022.3.1/bin/pycharm.sh   (执行文件的绝对路径，这里注意后缀.sh必须要写上，不然的话会报和之前一样的错误）
Type=Application   （类型，应用）
Terminal=false       （这个字段表示是否在执行时打开终端）
Icon=/opt/VSCodium/Documents/ProgramFiles/pycharm-2022.3.1/bin/pycharm.png     （指定应用图标文件）

2.3.给文件执行权

sudo chmod +x ~/Desktop/xxx.desktop  #文件名

2.4.给文件读写权，cd到需要读写到文件夹目录，然后通过以下命令完成

sudo chmod 777 文件夹路径名称

3.解除data目录到读写限制

sudo chmod 777 data

常规设置

显示tab符和空字符

打开setting,在搜索框中输入renderControlCharacters,选中勾选框,即可显示tab. 在搜索框中输入renderWhitespace,选择all,即可显示空格.

设置大小写转换的快捷键

文件>首选项>键盘快捷方式
输入 “转换为大写”, 会出现搜索结果【转换为大写】,鼠标悬停在该结果上, 点击前面的”加号” 或双击, 会弹出输入自定义快捷键的弹窗。
在键盘上面按下Ctrl、Shift和u, 然后按Enter键, 即可成功绑定转换为大写快捷键。
4.同理，搜索”转换为小写”, 鼠标悬停在结果上, 点击前面的”加号” 或双击, 弹出设置快捷键的弹窗，在键盘上面按下Ctrl、Shift和l, 然后按Enter键, 即可成功绑定转换为小写快捷键。最终设置的自定义的大小写转换快捷键如下:
转换为大写: Ctrl+Shift+u
转换为小写: Ctrl+Shift+l

设置默认终端为cmd

打开终端，点终端右上的+号，选择select default profite，在程序上部选cmd

常用插件

基础插件

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支持volar
volar 是专门为 Vue 3 构建的语言支持插件，搜索安装即可
语法高亮、智能感知、Emmet等包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

1.1配置

"emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }

1.2关闭远程服务
这两个服务需要关闭，否则经常请求半天，只看英文的意思是跟踪联系，暂时不知道这两个服务的具体作用，不过关闭后不影响volar的正常使用，vscode左下角齿轮>设置>搜索volar,找到
Vue-semantic-server，Trace:Server 设置为off
vue-syntactic-server Trace:Server 设置为off

1.3.ref自动补全.value
vscode左下角齿轮>设置>搜索volar，找到
volar:Auto Complete Refs 打钩

1.4格式化代码

{
  "[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Vue.volar"
  }
}

2.代码片段Vue VSCode Snippets
生成 Vue 代码片段

3.代码规范 eslint+prettier
这是个比较强大的代码格式化组合，如果设置这个就不要用volar格式化，把1.4去除
3.1项目依赖下载
需要下载五个依赖命令如下：

`npm i -D prettier eslint eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript`

Prettier 的作用是格式化代码风格，后续加上 VS Code 的 Prettier 插件，可以在保存代码时候，自动格式化代码风格。
eslint 是 ESLint 的核心模块，包括 CLI 命令工具；
eslint-plugin-vue 是 ESLint 的 Vue.js 语法插件，主要用于检查 Vue 代码文件语法；
@vue/eslint-config-prettier 是 ESLint 的 Prettier 配置，主要是联动 Prettier 进行代码规范的格式化；
@vue/eslint-config-typescript 是 ESLint 的 TypeScript 配置，主要是检查 Vue.js 项目中的 TypeScript 语法；

3.2设置 ESLint 项目配置文件
在项目根目录下新建文件，命名为.eslintrc.cjs

 /* eslint-env node */ //此行注释为屏蔽Eslint检查    
 module.exports = {    
 root: true,    
 plugins: ['prettier'],    
 extends: [      
 'plugin:vue/vue3-essential',      'plugin:prettier/recommended',      'eslint:recommended',      
 '@vue/eslint-config-typescript/recommended',      
 '@vue/eslint-config-prettier'   ],    rules: {      
 // 单引号限制      
 quotes: ['error', 'single'],      
 // 禁用console      
 'no-console': 'error'   
 }  
 };

3.3设置 Prettier项目配置文件
在根目录创建 prettier 配置文件 .prettierrc.json

 /* eslint-env node */  
 {    
 "tabWidth": 2,    
 "useTabs": false,    
 "endOfLine": "auto",    
 "singleQuote": true,    
 "semi": true,    
 "trailingComma": "none",    "bracketSpacing": true  
 }

3.4vscode 插件下载
需要下载5个插件：

Vue.volar ： Vue 3 官方推荐的 VS Code 开发插件；
Vue.vscode-typescript-vue-plugin： Vue 3 TypeScript 语法辅助 VS Code 插件；
dbaeumer.vscode-eslint ： ESLint 的 VS Code 插件；
esbenp.prettier-vscode ：Prettier 的 VS Code 插件；
rvest.vs-code-prettier-eslint：ESLint 联动 Prettier 的 VS Code 插件；

3.5配置 VS Code 的项目本地配置文件 .vscode/settings.json
打开本地配置文件 .vscode/settings.json，添加如下配置：

"editor.formatOnSave": true,   "eslint.format.enable": true,   "prettier.configPath": ".prettierrc.json", "[typescript]": {     "editor.defaultFormatter":"esbenp.prettier-vscode" 
 },    
"[typescriptreact]": {     "editor.defaultFormatter": "esbenp.prettier-vscode"   
},    
"[vue]": {
"editor.defaultFormatter":"esbenp.prettier-vscode"   
}

3.6用 ESLint 检查代码质量
在 package.json 里配置 ESLint 的 CLI 使用脚本：

{    
"scripts": {      
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"   
}  
}

在控制台输入如下命令，即可按照配置的规则检查代码质量

npm run lint

3.7团队协同
在项目的根目录下创建一个 .vscode 的目录。接着再创建 VS Code 扩展插件的配置文件 .vscode/extensions.json，声明需要用到的插件，这样子只要用 VS Code 打开这个项目，就可以提醒团队成员去安装相关插件了。

 {    
	"recommendations": [
		"Vue.volar",
		"Vue.vscode-typescript-vue-plugin", 
		"rvest.vs-code-prettier-eslint",    
		"dbaeumer.vscode-eslint",      
		"esbenp.prettier-vscode"
	 ]  
 }

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

10. 浏览器实时刷新 Live Serve

11. 格式化JS，CSS，HTML，JSON文件：JS-CSS-HTML Formatter
快捷键：Alt+Shift+F

12. 代码片段 Vue3 Snippets

python

1. python开发插件 Python Pylance
在扩展库里搜索python安装即可

2.代码校验及风格化 Flake8
在扩展库里搜索Flake8安装即可

3. python代码格式化 Black Formatter
在扩展库里搜索Flake8安装，在settings内设置

 "[python]": {
        // 指定python格式化工具
        "editor.defaultFormatter": "ms-python.black-formatter",
    },

go

1.安装go插件go
在扩展库里搜索go安装即可

2.go工具

2.1在线安装
ctrl + shift + P 搜索 Go: Install/Update Tools：然后全选，点ok安装工具。工具安装在gopath的bin目录下，安装好后格式化代码，选择go即可。

2.2离线安装

3.配置

 "go.useLanguageServer": true,
    "tabnine.experimentalAutoImports": true,
    "workbench.startupEditor": "none",
    "[go]": {
        "editor.defaultFormatter": "golang.go"
    }

其他

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 配置文====================================
    "[python]": {
        // 指定python格式化工具
        "editor.defaultFormatter": "ms-python.black-formatter",
    },
    // ====================python 配置文====================================
    // =======================前端代码格式化================================
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
      },
      "eslint.validate": [
        "javascript",
         "gavesciptreact",
         "html",
         "vue"
     ],
     "eslint.options": {
         "plugins":["html"]
     },
     "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
     "[vue]": {
        "editor.defaultFormatter":"esbenp.prettier-vscode"  },
        "prettier.semi": false,
		"prettier.singleQuote": true,
    // ========================前端代码格式化=============================
    // ========================golang=====================================
    "go.useLanguageServer": true,
    "tabnine.experimentalAutoImports": true,
    "workbench.startupEditor": "none",
    "[go]": {
        "editor.defaultFormatter": "golang.go"
    },
    "volar.autoCompleteRefs": true,
    "terminal.integrated.defaultProfile.windows": "Command Prompt"
    // ========================golang============================
    }