vscode 前端常用插件推荐

VS Code 是微软做的代码编辑器，官网的说法是它重新定义了编辑器。轻量编辑器常见的还有 Sublime、Notepad++、EditPlus、Atom。写前端时个人推荐编辑器用 VS Code，IDE 用 WebStorm。

装插件：点拓展按钮，搜索插件名安装，装完重新加载即可。不需要时进扩展，点插件右下角齿轮即可禁用或卸载。下面按「必备 > 推荐 > 了解」列出前端常用插件，必备一定要装，推荐看需要，了解的可以不装。

一、VS Code 简介

• 比起 Notepad++、EditPlus，它集成了许多 IDE 才有的功能，更像一个完整的代码编辑器
• 比起 Sublime，颜值更高，装插件更方便
• 比起 Atom，启动更快，打开大文件不卡
• 高自由度、高性能、高颜值，免费且有团队持续更新，是编辑器首选

二、前端常用插件（必备 > 推荐 > 了解）

必备

• Auto Close Tag：自动闭合 HTML/XML 标签
• Auto Rename Tag：自动完成另一侧标签的同步修改
• Beautify：格式化 html、js、css。另一款是 Prettier，格式化 JavaScript / TypeScript / CSS

另一款  Prettier



 格式化JavaScript / TypeScript / CSS 

• Bracket Pair Colorizer：给括号加上不同颜色，便于区分区块，可自定义括号类型和颜色
• HTML CSS Support：智能提示 CSS 类名以及 id
• HTML Snippets：智能提示 HTML 标签及含义
• JavaScript(ES6) code snippets：ES6 智能提示和快速输入，支持 .js、.ts、.jsx、.tsx、.html、.vue
• Path Intellisense：自动提示文件路径，方便快速引入文件
• open in browser：用快捷键或右键在浏览器打开 html，可指定 Firefox、Chrome、Opera、IE、Safari
• live server：启动本地 web 服务器

推荐

• Debugger for Chrome：把 VS Code 上的断点映射到 Chrome，方便调试
• ESLint：js 语法纠错，可自定义；配置较复杂，建议用网上广泛使用的配置
• GitLens：查看 git 日志，git 重度使用者必备
• jQuery Code Snippets：jQuery 代码智能提示
• Markdown Preview Enhanced：实时预览 markdown
• markdownlint：markdown 语法纠错
• Material Icon Theme：图标主题，可换色系；更新极频繁，基本和 VS Code 同步。另一套目录树图标主题是 vscode-icons

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

• React/Redux/react-router Snippets：React/Redux/react-router 语法智能提示（React 必备）。补充：React-Native/React/Redux snippets for es6/es7（下载人数很多）；react-beautify（格式化 javascript、JSX、typescript、TSX）

补充两个



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



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



2. react-beautify



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

• Vetur：Vue 多功能集成（语法高亮、智能提示、emmet、错误提示、格式化、自动补全、debugger），官方钦定的 Vue 插件。补充：VueHelper（vue 代码片段）；Vue TypeScript Snippets；Vue 2 Snippets

补充 两个: 



1) VueHelper



vue代码片段

2) Vue TypeScript Snippets



vue的 typescript 代码片段

3) Vue 2 Snippets



vue 2代码片段

• Dracula Official：很好看的一款主题风格
• Class autocomplete for HTML：智能提示 HTML class 属性
• IntelliSense for CSS class names：智能提示 css 的 class 名
• Npm Intellisense：require 时的包提示（node 必备）

了解

• filesize：查看文件大小
• HTMLHint：静态检查规则

文末再次列出 open in browser（打开本地浏览器）。如果还有好的插件会随时补充。

三、常用 settings.json 配置

下面是一份常用的 JSON 配置，覆盖主题、格式化、搜索排除、emmet、ESLint、Prettier、GitLens、launch 调试和 Git 路径等。

{ // 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": []

    },

    // 是否格式化python文件

    "python.linting.enabled": false,

    // 设置端口。开启apicloud在vscode中的wifi真机同步

    "apicloud.port": "23450",

    // 设置apicloud在vscode中的wifi真机同步根目录，默认可不设置

    "apicloud.subdirectories": "/apicloudproject",



// git 部分配置

"gitlens.advanced.messages": {

    "suppressShowKeyBindingsNotice": true

},

"git.path": "C:/Program Files/Git/cmd/git.exe",

"git.autofetch": true,

"git.confirmSync": false,



"open-in-browser.default": "Google Chrome",

"files.autoSave": "afterDelay",



"emmet.includeLanguages": {

    "javascript": "javascriptreact"

},



"workbench.startupEditor": "welcomePage",



}

这里有一份更详细的清单，欢迎参考。原文链接：https://blog.csdn.net/jiandan1127/java/article/details/85957003

一句话总结：VS Code 靠插件补齐前端工作流：先装标签、路径、格式化和本地预览，再按 Vue / React / Git 需要加 Vetur、React Snippets、GitLens。