vscode 前端常用插件推荐

ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

11.jQuery Code Snippets (推荐)

jQuery代码智能提示

12.Markdown Preview Enhanced (推荐)

实时预览markdown，markdown使用者必备

13.markdownlint (推荐)

markdown语法纠错

14.Material Icon Theme (推荐)

vscode图标主题，支持更换不同色系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持一致

极简主义是不需要的

另一套 目录树图标主题 vscode-icons

使用方法,配置如下json

15.open in browser (必备)

vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

设置默认浏览器

16.Path Intellisense (必备)

自动提示文件路径，支持各种快速引入文件

17.React/Redux/react-router Snippets (推荐)(react必备)

React/Redux/react-router语法智能提示

补充两个

1) React-Native/React/Redux snippets for es6/es7

react代码片段，下载人数超多

2) react-beautify

格式化 javascript, JSX, typescript, TSX 文件

18.Vetur (推荐)(vue必备)

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

补充 两个:

1) VueHelper

vue代码片段

2) Vue TypeScript Snippets

vue的 typescript 代码片段

3) Vue 2 Snippets

vue 2代码片段

19.Dracula Official (推荐)

很好看的一款主题风格

这样的

20.filesize (了解)

查看文件大小

20.HTMLHint(了解)

静态检查规则 具体规则戳这

21. Class autocomplete for HTML (推荐)

智能提示HTML class =“”属性（必备）

22. IntelliSense for CSS class names (推荐)

智能提示 css 的 class 名

23.  Npm Intellisense(node必备)

require 时的包提示

{ // VScode主题配置

“editor.tabSize”: 2,

“editor.lineHeight”: 24,

“editor.renderLineHighlight”: “none”,

“editor.renderWhitespace”: “none”,

“editor.fontFamily”: “Consolas”,

“editor.fontSize”: 15,

“editor.cursorBlinking”: “smooth”,

“editor.multiCursorModifier”: “ctrlCmd”,

“editor.formatOnSave”: false,

“editor.snippetSuggestions”: “top”,

“editor.wordWrapColumn”: 200,

“editor.wordWrap”: “off”,

“editor.quickSuggestions”: {

“other”: true,

“comments”: true,

“strings”: false

},

// 保存时自动格式化

“editor.formatOnPaste”: false,

“files.trimTrailingWhitespace”: true,

“terminal.integrated.shell.windows”: “C:\windows\System32\WindowsPowerShell\v1.0\powershell.exe”,

“typescript.suggest.autoImports”: true,

“javascript.updateImportsOnFileMove.enabled”: “always”,

“javascript.suggest.autoImports”: true,

“workbench.iconTheme”: “eq-material-theme-icons”,

“workbench.startupEditor”: “newUntitledFile”,

“workbench.colorTheme”: “Material Theme High Contrast”,

“workbench.colorCustomizations”: {

// 设置guide线高亮颜色

“editorIndentGuide.activeBackground”: “#ff0000”

},

// 启用/禁用导航路径

“breadcrumbs.enabled”: true,

// git是否启用自动拉取

“git.autofetch”: true,

“minapp-vscode.disableAutoConfig”: true,

“view-in-browser.customBrowser”: “chrome”,

// 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.autoFixOnSave”: false,

// eslint配置文件

“eslint.options”: {

“configFile”: “E:/aaaworkspace/ex/experience/.eslintrc.js”,

“plugins”: [

“html”,

“vue”

]

},

“eslint.validate”: [

“javascript”,

“javascriptreact”,

{

“language”: “vue”,

“autoFix”: true

},

“html”,

“typescript”,

“typescriptreact”

],

// 格式化快捷键 shirt+alt+F

// prettier进行格式化时是否安装eslint配置去执行，建议false

“prettier.eslintIntegration”: false,

// 如果为true，将使用单引号而不是双引号

“prettier.singleQuote”: true,

// 代码换行,每一行最大占有字符数

“prettier.printWidth”: 200,

// 配置gitlen中git提交历史记录的信息显示情况

“gitlens.advanced.messages”: {

“suppressCommitHasNoPreviousCommitWarning”: false,

“suppressCommitNotFoundWarning”: false,

“suppressFileNotUnderSourceControlWarning”: false,

“suppressGitVersionWarning”: false,

“suppressLineUncommittedWarning”: false,

“suppressNoRepositoryWarning”: false,

“suppressResultsExplorerNotice”: false,

“suppressShowKeyBindingsNotice”: true,

“suppressUpdateNotice”: true,

“suppressWelcomeNotice”: 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”: []

},

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

aunch": {

“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”: []

},

最后

[外链图片转存中…(img-bmLzMfw4-1718719830717)]

[外链图片转存中…(img-16ew7Dk6-1718719830718)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容