vscode-前端插件
通用插件
中文
chinese
主题
atom one dark theme 或者 Dracula Official
标签主题
Material Icon Theme
格式化
beautify
给括号加上不同的颜色, 方便区分代码块
Bracket Pair Colorizer
本地文件修改历史
Local History
单词拼写检查
Code Spell Checker
单词拼写检查，单词拼写提示，单词拼写错误后会有提示
git
历史提交记录
git history
GitLens
方便查看git日志，git重度使用者必备
使用教程: https://www.jianshu.com/p/a91cb8a2e55d
前端插件
自动闭合HTML/XML标签
Auto Close Tag
高亮
Babel JavaScript
自动完成另一侧标签的同步修改
Auto Rename Tag
通过css选择器快速跳至css文件
CSS Peek
通过css选择器快速跳至css文件（Cmd+鼠标单击/Ctrl+鼠标单击）；悬停css选择器预览css定义（Cmd+鼠标悬浮/Ctrl+鼠标悬浮）
open in browser
vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
配置默认值：
“open-in-browser.default”: “google chrome”
括号加上不同的颜色
Bracket Pair Colorizer
给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
Debugger for Chrome
映射vscode上的断点到chrome上，方便调试
调试方式
ESLint
js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置
智能提示CSS类名以及id
HTML CSS Support
智能提示HTML标签，以及标签含义
HTML Snippets
JavaScript(ES6) code snippets
ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
jQuery代码智能提示
jQuery Code Snippets
自动提示文件路径
Path Intellisense
支持各种快速引入文件
React/Redux/react-router语法智能提示
React/Redux/react-router Snippets
React-Native/React/Redux snippets for es6/es7
react-beautify
格式化 javascript, JSX, typescript, TSX 文件
智能提示HTML class =“”属性
Class autocomplete for HTML
智能提示 css 的 class 名
IntelliSense for CSS class names
require 时的包提示(node必备)
Npm Intellisense
Vetur (推荐)(vue必备)
Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。
VueHelper
vue代码片段
Vue TypeScript Snippets
vue的 typescript 代码片段
Vue 2 Snippets
vue 2代码片段
bootstrap v3
bootstrap 3支持
java插件
java Extension Back
Lombok
如果想用jdk8, Language Support for java™ by Red Hat需要改成0.64.1一下版本
spring boot
spring boot Extension Pack
xml
.xml 文件节点提示功能
vsc-mybatis
可以跳到xml文件
python插件
python开发依赖包
python
直接装python extension pack, 包含了django
pylance
自定义配置
{
"editor.tabSize": 2,
"editor.fontSize": 15,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.semi": false,// 结尾没有;
"prettier.singleQuote": true,// 单引号
"editor.formatOnSave": true,
"editor.lineHeight": 24,
"editor.renderLineHighlight": "none",
"editor.renderWhitespace": "none",
"editor.fontFamily": "Consolas",
"editor.cursorBlinking": "smooth",
"editor.multiCursorModifier": "ctrlCmd",
"editor.snippetSuggestions": "top",
"editor.wordWrapColumn": 200,
"editor.wordWrap": "off",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": false
},
// 保存时自动格式化
"editor.formatOnPaste": false,
"files.trimTrailingWhitespace": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"javascript.suggest.autoImports": true,
"workbench.startupEditor": "newUntitledFile",
"workbench.colorCustomizations": {
// 设置guide线高亮颜色
"editorIndentGuide.activeBackground": "#ff0000"
},
// 启用/禁用导航路径
"breadcrumbs.enabled": true,
// VScode 文件搜索区域配置
"search.exclude": {
"**/dist": true,
"**/build": true,
"**/elehukouben": true,
"**/.git": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true
},
// 配置文件关联
"files.associations": {
"*.vue": "html",
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript"
},
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 配置emmet对文件类型的支持
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
"xml": {
"attr_quotes": "single"
}
},
// 在react的jsx中添加对emmet的支持
"emmet.includeLanguages": {
"jsx-sublime-babel-tags": "javascriptreact",
"wxml": "html"
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"wrap_attributes": "force-aligned"
},
// 是否开启eslint检测
"eslint.enable": false,
// eslint配置文件
"eslint.options": {
"configFile": "E:/aaaworkspace/ex/experience/.eslintrc.js",
"plugins": [
"html",
"vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"typescript",
"typescriptreact"
],
// 格式化快捷键 shirt+alt+F
// prettier进行格式化时是否安装eslint配置去执行，建议false
"prettier.eslintIntegration": false,
// 代码换行,每一行最大占有字符数
"prettier.printWidth": 200,
// 配置gitlen中git提交历史记录的信息显示情况
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false
},
// 调试，本地服务器配置
"launch": {
"configurations": [{
"type": "node",
"request": "launch",
"name": "Node.js",
"program": "${file}"
},
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
],
"compounds": []
},
"git.path": "C:/Program Files/Git/cmd/git.exe",
// git是否启用自动拉取
"git.autofetch": true,
"git.confirmSync": false,
"open-in-browser.default": "Google Chrome",
"files.autoSave": "afterDelay",
"explorer.confirmDelete": false,
}
常用配置
CPU占用过高?
设置中关闭search.followSymlinks, 不然可能会引起cpu占用过高
python
- “python.linting.flake8Enabled”: true,方法自动补全()
- “python.linting.flake8Enabled”: true,
python安装flake8模块后, 做这个配置, 提示代码错误及不规范