VSCode 工具常用插件

1、Debugger for Chrome

方便运行代码，浏览器打开

2、 GitLens — Git supercharged

 鼠标放到代码行上可以显示，改行的上一次修改记录

3、Git History

git log

4、 Auto Close Tag

自动完成闭合标签

5、 Auto Rename Tag

修改了前面的开始标签，自动remane 后面的闭合标签 

6、Axios Snippets

axios代码提示

7、ES7+ React/Redux/React-Native snippets

ES7代码片段提示

 

8、Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

快捷键模板，设置模板快捷键，加快开发速度

 

 9、ESLint

 

10、HTML CSS Support

 html 中的 id 和 class 的属性 提示

11、 HTML Snippets

html代码片段

12、 Prettier - Code formatter

 还有格式验证之类的

13、Stylelint

样式的扩展

 

14、Vetur

15、 Vue VSCode Snippets

vue的一些代码片段

16、 VueHelper

 对vue一些属性或者其他方法的 helper说明

 17、Beautify

18、 SFTP

 sftp拉代码的

 

 19、SCSS Formatter

 

20、 vscode extension for ECharts

vscode对 ECharts 的支持，

settings.json

{
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "editor.tabSize": 2,
  "prettier.singleQuote": true,
  "breadcrumbs.enabled": true,
  "prettier.semi": false,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "vetur.format.defaultFormatter.html": "prettier",
  "eslint.nodePath": "",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist"
  ]
}

初次下载 VScode需要的准备工作

需要先安装 node，并设置好 电脑系统变量 NODE_PATH 和 环境变量 path 的值