vscode常用插件及设置

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
  27. IntelliCode
  28. IntelliCode API Usage Examples
  29. Kotlin Language
  30. React Native Tools

配置

// {
//     "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
  // }
  
  

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值