vscode常用插件及设置

插件

1. Vue-Official
2. any-rule
3. Auto Close Tag
4. Auto Rename Tag
5. Beautify css/sass/scss/less
6. Chinese (Simplified) (简体中文)
7. Color Highlight
8. Dart
9. ES7 React/Redux/GraphQL/React-Native snippets
10. ESlint
11. Figma for VS Code
12. Flutter
13. Git Graph
14. Git History
15. GitLens-Git supercharged
16. Go
17. Highlight Matching Tag
18. HTML CSS Support
19. IntelliSense for CSS class names in HTML
20. Path Intellisense
21. Prettier - Code formatter
22. Simple React Snippets
23. Typescript React code snippets
24. Vue 3 Snippets
25. Vue VSCode Snippets
26. Vuter

配置

// {
//     "workbench.preferredDarkColorTheme": "Visual Studio Dark",
//     "search.followSymlinks": false,
//     "git.autorefresh": false,
//     "editor.tabSize": 2,

//     "[dart]": {
//         "editor.formatOnSave": true,
//         "editor.formatOnType": true,
//         "editor.rulers": [
//             80
//         ],
//         "editor.selectionHighlight": false,
//         "editor.suggestSelection": "first",
//         "editor.tabCompletion": "onlySnippets",
//         "editor.wordBasedSuggestions": "off"
//     },

//     // 前端格式化
//     "editor.formatOnSave": true,
//     "eslint.enable": true, // 开启eslint检查
// 		// ESLint只对javascript、typescript以及javascrpitreact进行代码格式化
//     "[javascript]": {
//         "editor.formatOnSave": false
//     },
//     "[javascriptreact]": {
//         "editor.formatOnSave": false
//     },
//     "[typescript]": {
//         "editor.formatOnSave": false
//     },
//     "editor.codeActionsOnSave": {
//         "source.fixAll.eslint": true
//     },
//     "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html"],
//     "prettier.requireConfig": true, // 必须要在项目根目录下添加配置文件
//     "editor.defaultFormatter": "esbenp.prettier-vscode",
// }

// react
{
  "workbench.preferredDarkColorTheme": "Visual Studio Dark",
  "search.followSymlinks": false,
  "git.autorefresh": false,

  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.rulers": [80],
    "editor.selectionHighlight": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  },
  // 每次保存自动格式化
  "editor.formatOnSave": true,
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // vue文件默认格式化方式vetur
  "[vue]": {
    // "editor.defaultFormatter": "octref.vetur"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // vetur格式化配置
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.options.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    }
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格 只有在默认vetur的时候生效
  // js文件默认格式化方式 和vue中的js保持一致使用编辑器自带的ts格式
  "[javascript]": {
    // "editor.defaultFormatter": "vscode.typescript-language-features"
    // javascript文件默认格式化方式prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // json文件默认格式化方式prettier
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // css文件默认格式化方式prettier
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // typescript文件默认格式化方式prettier
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 控制折行方式 - "on" (根据视区宽度折行)
  "editor.wordWrap": "on",
  "editor.tabSize": 2, // 换行默认以tab缩进 2个字符
  "editor.colorDecorators": false, // 控制编辑器是否显示内联颜色修饰器和颜色选取器。
  "editor.snippetSuggestions": "top", // 将建议的代码段优先级提前选择，比如输入for第一个提示是for循环代码段。
  "files.associations": {
    // 文件关联语言的优先级配置
    "*.js": "javascriptreact",
    "*.vue": "vue",
    "*.cshtml": "html",
    "*.dwt": "html"
  },
  //   "files.autoSave": "onFocusChange",
  "editor.formatOnPaste": true
}

// vue
// {
//   "[vue]": {
//     // "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
//     "editor.defaultFormatter": "octref.vetur"
//     // "editor.defaultFormatter": "esbenp.prettier-vscode"
//   },
//   //  每次保存自动格式化
//   "editor.formatOnSave": true,
//   //  每次保存的时候将代码按eslint格式进行修复
//   "editor.codeActionsOnSave": {
//     "source.fixAll.eslint": true
//   },
//   // vue文件默认格式化方式vetur
//   // vetur格式化配置
//   "vetur.format.defaultFormatter.html": "js-beautify-html",
//   "vetur.format.options.tabSize": 2,
//   "vetur.format.defaultFormatterOptions": {
//     "js-beautify-html": {
//       "wrap_attributes": "auto", // 仅在超出行长度时才对属性进行换行
//       // "wrap_attributes": "force", // 对除第一个属性外的其他每个属性进行换行
//       // "wrap_attributes": "force-aligned", // 对除第一个属性外的其他每个属性进行换行，并保持对齐
//       // "wrap_attributes": "force-expand-multiline", // 属性强制换行对齐
//       // "wrap_attributes": "aligned-multiple", // 当超出折行长度时，将属性进行垂直对齐
//       "wrap-line-length": 150 // 对每个属性进行换行
//     }
//     // "prettier": {
//     //   "singleQuote": false,
//     //   "semi": true,
//     // }
//   },
//   // "vetur.format.defaultFormatter.js": "prettier-eslint", //让vue中的js按编辑器自带的ts格式进行格式化
//   "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
//   "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格 只有在默认vetur的时候生效
//   // js文件默认格式化方式 和vue中的js保持一致使用编辑器自带的ts格式
//   "[javascript]": {
//     // "editor.defaultFormatter": "vscode.typescript-language-features"
//     // javascript文件默认格式化方式prettier
//     "editor.defaultFormatter": "esbenp.prettier-vscode"
//   },

//   // json文件默认格式化方式prettier
//   "[json]": {
//     "editor.defaultFormatter": "esbenp.prettier-vscode"
//   },
//   // css文件默认格式化方式prettier
//   "[css]": {
//     "editor.defaultFormatter": "esbenp.prettier-vscode"
//   },
//   // typescript文件默认格式化方式prettier
//   "[typescript]": {
//     "editor.defaultFormatter": "esbenp.prettier-vscode"
//   },
//   // -----------------------其他自行配置-----------------------
//   //关闭快速预览
//   "editor.minimap.enabled": true,
//   //  字体大小
//   "editor.fontSize": 18,
//   // 控制折行方式 - "on" (根据视区宽度折行)
//   "editor.wordWrap": "on",
//   "editor.tabSize": 2, // 换行默认以tab缩进 2个字符
//   "editor.colorDecorators": false, // 控制编辑器是否显示内联颜色修饰器和颜色选取器。
//   "editor.snippetSuggestions": "top", // 将建议的代码段优先级提前选择，比如输入for第一个提示是for循环代码段。
//   "files.associations": {
//     // 文件关联语言的优先级配置
//     "*.vue": "vue",
//     "*.cshtml": "html",
//     "*.js": "javascript",
//     "*.dwt": "html"
//   },
//   "workbench.editor.untitled.hint": "hidden",
//   "explorer.confirmDelete": false,
//   "editor.unicodeHighlight.ambiguousCharacters": false,
//   "security.workspace.trust.untrustedFiles": "open",
//   "window.zoomLevel": 1
// }