Visual Studio Code 常用推荐插件安装及配置详解

VSCode 常用推荐插件

Chinese (Simplified) Language Pack for Visual Studio Code：适用于 VS Code 的中文（简体）语言包
vscode-icons：vscode 的文件、文件夹图标
Atom One Dark Theme：vscode 的界面主题
Auto Rename Tag：自动重命名标签的插件
Auto Close Tag：自动闭合标签的插件
Auto Import：自动导入插件
Bracket Pair Colorizer：颜色提示插件
change-case：快速切换变量名大小写格式，格式化、规范化变量名
Code Runner：运行多种语言的代码段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6，Ruby，Go 等多种语言
filesize：文件大小信息
HTML Snippets：html 插件
IntelliSense for CSS class names in HTML：一个 Visual Studio Code 扩展，它 class 基于在工作区中找到的定义或通过 link 元素引用的外部文件为 HTML 属性提供 CSS 类名称完成。
JavaScript (ES6) code snippets：超强的 es6 代码片段提示插件
Live Server：服务器插件
Markdown Preview Enhanced：Markdown 文件预览插件
markdown-formatter：Markdown 文件格式化插件
open in browser：在默认浏览器打开插件
npm Intellisense：Visual Studio Code 插件，可自动完成导入语句中的 npm 模块
Path Intellisense：自动完成文件名的 Visual Studio Code 插件
Prettify JSON：格式化 json 文件的插件
Todo Tree：Todo 待办事项插件
TODO Highlight：高亮凸显 Todo 代办事项
webpack：使用 Babel Transpiling（ES6）创建最小的 Webpack 配置文件。
Webpack Snippets：该扩展添加了 Webpack 配置文件的片段
Webpack Dependencie：webpack 的插件依赖
Sass/Less/Scss/Typescript/Javascript/Jade/Pug Compile Hero Pro： less, sass, scss, typescript, jade, pug and jsx 在 Visual Studio Code 中轻松处理文件
fileheader：在 vscode 中用于生成文件头部注释和函数注释的插件
Sass Formatter：基于 sass-convert 的 VS Code 的 Sass 格式化程序扩展。美化 sass，scss 和 css 文件
Manta's Stylus Supremacy ：格式化 stylus 文件
language-stylus：Visual Studio Code 的 stylus 支持
Vetur：vue 开发插件，包括语法高亮、Snippet 片段、Emmet、整理/错误检查、格式化、自动完成、调试、VTI / CLI，官方文档
Prettier - Code formatter：vscode 格式化插件
ESLint：eslint 格式化检查
Prettier ESLint：一个 Visual Studio 扩展，用于使用 prettier-eslint 包格式化 JavaScript 代码。
Beautify：美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码

VSCode 配置详解

settings.json eslint 格式检测、保存自动格式化文件

{
  // 控制资源管理器删除文件询问是否确认
  "explorer.confirmDelete": false,
  // 不在搜索中跟踪符号链接 解决打开vscode内存占用过大
  "search.followSymlinks": false,
  // 函数名 空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 单引号
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  // 不显示vscode新版本提示
  "vsicons.dontShowNewVersionMessage": true,
  // 工作台窗口外观缩放
  "window.zoomLevel": 1,

  // 工作台 - 图标主题
  "workbench.iconTheme": "vscode-icons",
  // 工作台 - 颜色主题
  "workbench.colorTheme": "Atom One Dark",
  // 控制树参考线
  "workbench.tree.renderIndentGuides": "always",

  // 文本编辑器 - 字体大小
  "editor.fontSize": 14,
  // 文本编辑器 - 保存自动格式化
  "editor.formatOnSave": true,

  // 配置eslint
  // 每次保存的时候将代码按eslint格式进行修复 启用保存时自动修复,默认只支持.js文件
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 添加 vue 支持
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],

  // vetur 插件配置
  // 四个空格缩进
  "vetur.format.options.tabSize": 4,
  // 允许使用tab缩进
  "vetur.format.options.useTabs": true, 
  // 让vue中的html按js-beautify-html格式进行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 让vue中的ts按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  // vetur配置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      "semi": false, //不加分号
      "singleQuote": true //用单引号
    }
  },

  // 文件头部注释和函数注释
  "fileheader.customMade": {
    "Author": "Quinn",
    "Date": "Do not edit",
    "LastEditTime": "Do not edit",
    "LastEditors": "quinn",
    "Description": " "
  },
  "fileheader.cursorMode": {
    "author": "Quinn",
    "description": " ",
    "param": "",
    "return": ""
  },
  "editor.defaultFormatter": "HookyQR.beautify"
}