VS CODE 微软旗下最好用的前端开发IDE编辑器+常用插件介绍

推荐给广大前端开发人员一款轻便好用的编辑器：VS CODE，微软出品完全免费，官网地址：https://code.visualstudio.com

安装完成后自动会显示中文，如果需要设置字体主题样式等，请点击左下角的齿轮按钮，里面有一个设置，自行选择自己喜欢的配置。

然后推荐安装一些基本的插件，会让你的开发更便捷，点击左侧第五个图标，进入插件商店，搜索以下关键字：

1. IntelliSense for CSS class names in HTML，htm和css代码补全插件，地址：https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

2. Vue VSCode Snippets，VUE代码自动补全插件，地址：https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

3. Vetur，VUE语法高亮插件，地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur

4. Vue 2 Snippets，地址：https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

5. ESLint，js语法校验，地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

6. JavaScript (ES6) code snippets, js自动补全，地址：https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

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

8. HTML Snippets
   智能提示HTML标签，以及标签含义

9. jQuery Code Snippets
   jQuery代码智能提示

10. Auto Rename Tag
    自动完成另一侧标签的同步修改

###其他vscode插件安装 (来源ifredom的文章https://blog.csdn.net/win7583362/article/details/79315055)

Atom One Dark Theme 主题
VSCode Great Icons 图标主题
Beautify 美化vscode代码
Bracket Pair Colorizer 每一对括号用不同颜色区别
Code Runner node，python等代码不必开命令行即可运行
Eslint 语法检测
Git History git提交历史
GitLens 在代码中显示每一行代码的提交历史
HTML CSS Support vscode对html，css文件支持，便于你快速书写属性
Path Intellisense 路径识别苦战，比如书写图片路径时。遗憾就是，对webpack项目中的路径别名无法扩展
Prettier 格式化，使用大名鼎鼎的prettier对你的文件进行格式化，快捷键 alt+shift +F
Python 添加对.py文件的支持，毕竟tab与空格的痛苦写过python的都知道
React Native Tools 添加对 React Native项目的支持，让便你书写es6以及jsx
C/C++ 运行React Native项目时，有些文件的查看需要这个
Settings Sync 用于同步vscode配置（相对而言配置更复杂，可不安装）
Sublime Text Keymap 启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定，个人习惯sublime了
Vetur 添加对单文件.vue后缀文件的快速书写支持。computed,mounted等迅速书写
Vue 2 Snippets 新建vue模板
markdownlint 书写md文件的预览插件
language-stylus CSS预处理器styl后缀文件的识别扩展
View In Browser 迅速通过浏览器打开文件

https://www.cnblogs.com/karthuslorin/p/8577224.html

###参考配置文件：

{ // 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",
    // 是否允许自定义的snippet片段提示
    "editor.snippetSuggestions": "top",
    "editor.formatOnPaste": true,
    "workbench.iconTheme": "vscode-great-icons",
    "workbench.colorTheme": "One Dark Pro Vivid",
    "workbench.startupEditor": "newUntitledFile",
    "html.suggest.angular1": false,
    "html.suggest.ionic": false,
    "files.trimTrailingWhitespace": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 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
    },
    // 排除文件搜索区域，比如node_modules
    "files.exclude": {
        "**/.idea": true,
        "**/yarn.lock": true,
        "**/tmp": true
    },
    // 配置文件关联
    "files.associations": {
        "*.vue": "vue",
        "*.wxss": "css"
    },
    // 配置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"
    },
    // 是否开启eslint检测
    "eslint.enable": false,
    // 文件保存时，是否自动根据eslint进行格式化
    "eslint.autoFixOnSave": false,
    // eslint配置文件
    "eslint.options": {
        "plugins": [
            "html",
            "javascript",
            {
                "language": "vue",
                "autoFix": true
            },
            "vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html"
    ],
    // 快捷键方案使用sublime的一套快捷键
    "sublimeTextKeymap.promptV3Features": true,
    // 格式化快捷键 shirt+alt+F
    // prettier进行格式化时是否安装eslint配置去执行，建议false
    "prettier.eslintIntegration": true,
    // 如果为true，将使用单引号而不是双引号
    "prettier.singleQuote": true,
    // 配置gitlen中git提交历史记录的信息显示情况
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressResultsExplorerNotice": false,
        "suppressUpdateNotice": true,
        "suppressWelcomeNotice": false
    },
    // 开启apicloud在vscode中的wifi真机同步
    "apicloud.port": "23450",
    // 设置apicloud在vscode中的wifi真机同步根目录
    "apicloud.subdirectories": "/apiclouduser",
    // git是否启用自动拉取
    "git.autofetch": true,
}