vscode 常用插件

发布时间：2019-05-07 18:32:55

1.Bracket Pair Colorizer

允许使用颜色标识匹配的括号。用户可以定义要匹配的字符以及要使用的颜色。

2.Turbo Console Log

通过自动执行编写有意义的日志消息的操作

3.Prettier - Code formatter

使用Prettier格式化JavaScript / TypeScript / CSS 。

4.Live Server

为静态和动态页面启动具有实时重新加载功能的本地开发服务器。

5.Live Sass Compiler

实时编译/转换SASS / SCSS文件到CSS文件。

6.indent-rainbow

使缩进更具可读性。

7.HTML CSS Support

可以在VS代码设置中指定远程样式表。

8.Code Spell Checker

拼写检查。

9.REST Client

允许直接发送HTTP请求并在Visual Studio代码中查看响应。

10.GitLens — Git supercharged

用于可视化，导航和浏览Git存储库的存储库视图。

11.Auto-Open Markdown Preview

每当打开新的Markdown文件时，会自动显示Markdown预览。

12.ES7 React/Redux/GraphQL/React-Native snippets

提供ES7中的JavaScript和React / Redux代码段以及VS代码的 Babel。

13.Vetur

VS代码的Vue工具。

14.Angular v7 Snippets

用于VS代码的Angular TypeScript代码段。

15.Auto Rename Tag

自动重命名成对的HTML/XML标记。

16.Manta’s Stylus Supremacy

格式化stylus文件

17.Minify

压缩js，css，html文件

18.Beautify

美化 javascript, JSON, CSS, Sass, and HTML

19.ESLint

检查代码

20.Path Intellisense

自动补全文件路径

21.language-stylus

stylus文件高亮以及自动补全代码

22. Jest

jest使用插件

附：配置

{
  "files.autoSave": "onFocusChange", // 开启自动保存文件，可切换方式
  "files.associations": {
    ".vue": "html",
    "*.vue": "vue"
  },

  "editor.wordWrap": "on",
  "editor.detectIndentation": false, // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.tabSize": 2, // 重新设定tabsize
  "editor.formatOnSave": true, // #每次保存的时候自动格式化 

  "eslint.autoFixOnSave": true, // #每次保存的时候将代码按eslint格式进行修复
  "eslint.validate": [ // 添加 vue 支持
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],

  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true, // #使用单引号替代双引号 
  "prettier.semi": false, // #去掉代码结尾的分号 
  "prettier.eslintIntegration": true, // #让prettier使用eslint的代码格式进行校验 

  "window.zoomLevel": 0,
  "git.enableSmartCommit": true,

  "minify.minifyExistingOnSave": true,
  
  "liveSassCompile.settings.formats": [{
    "format": "compressed",
    "extensionName": ".min.css",
    "savePath": null
  }],
  "liveSassCompile.settings.generateMap": false,

  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" // #vue组件中html代码格式化样式
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },

  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入冒号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": true, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行

  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #让函数(名)和后面的括号之间加个空格

  "turboConsoleLog.logMessagePrefix": "OUTPUT"
}