天天看點

vscode的setting.json個人配置及個人常用插件

vscode這個編輯器,前端從業人員使用的非常多,我也是經常使用,每次在新的電腦上使用時都要重新寫setting.json配置,感覺很麻煩,就寫了這篇文章記錄下自己的一些常用配置。順便說一句,setting.json配置沒有最好的,隻有最适合自己的。

{
  "workbench.iconTheme": "material-icon-theme", // 使用的檔案圖示主題
  "editor.fontSize": 14, // 字型大小,
  "editor.tabSize": 2, // tab 空格數
  "window.zoomLevel": 1, // 視窗的縮放級别
  // 在使用搜尋功能時,将這些檔案夾/檔案排除在外
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/target": true,
    "**/logs": true
  },
  "workbench.editor.enablePreview": false, // 打開的編輯器是否為預覽
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #讓prettier使用eslint的代碼格式進行校驗
  "prettier.eslintIntegration": true,
  // #去掉代碼結尾的分号
  "prettier.semi": false,
  // #使用單引号替代雙引号
  "prettier.singleQuote": true,
  "eslint.options": {
    "plugins": [ "html" ]
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "peacock.surpriseMeOnStartup": true,
}           

二、個人常用插件

1、Auto Close Tag

2、Auto Rename Tag

3、Babel ES6/ES7

4、Bracket Pair Colorizer

5、Chinese

6、Debugger for Chrome

7、ESLint

8、GitLens — Git supercharged

9、HTML CSS Support

10、HTML Snippets

11、Highlight Matching Tag

12、IntelliSense for CSS class names in HTML

13、JavaScript (ES6) code snippets

14、Material Icon Theme

15、npm Intellisense

16、open in browser

17、Path Intellisense

18、Peacock

19、Prettier - Code formatter

20、React Native Tools

21、React/Redux/react-router Snippets

22、SVG Viewer

23、Trailing Spaces

24、Vetur

25、settings sync(設定同步插件,個人不太喜歡使用這個插件)

繼續閱讀