vscode

2020/7/20 vscode

# plugins

- Bookmarks
- Bracket Pair Colorizer
- Debugger for Chrome
- EditorConfig for VS Code
- Error Gutters
- ESLint
- TSLint
- filesize
- Add jsdoc comments

- open in browser
- browser preview
- PicGo

- Live Server
- Material Theme
- Material Icon Theme
- One Dark Pro

- WakaTime
- Terminal

- Docker
- Settings Sync

- Git History
- GitLens — Git supercharged



- Auto Close Tag
- Auto Rename Tag
- Mithril Emmet
- HTML CSS Support
- HTML Snippets
- HTMLHint

- Import Cost
- markdownlint

- Path Autocomplete
- Path Intellisense

- Prettier - Code formatter
- stylelint

- TODO Highlight

- Autoprefixer
- CSScomb
- language-stylus
- Sass

- REST Client

- Angular 1 JavaScript and TypeScript Snippets

- Vetur
- Vue 2 Snippets

- JavaScript (ES6) code snippets
- ES7 React/Redux/GraphQL/React-Native snippets
- Reactjs code snippets

- minapp

- npm
- npm Intellisense

- any-rule
- code spell checker
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

# vscode setting

  • vscode-user-setting.json
...
{
  "workbench.iconTheme": "material-icon-theme",
  "terminal.integrated.shell.osx": "/bin/zsh",
  "workbench.settings.useSplitJSON": true,
  "editor.tabSize": 4,
  "files.associations": {
    "*.js": "javascript",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.vue": "vue",
    "*.tpl": "html"
  },
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "wxml": "html"
  },
  "eslint.enable": true,
  "eslint.validate": [
    "vue",
    "vue-html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.codeActionsOnSave.mode": "all",
  "html.format.extraLiners": "",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  }
  // "[javascript]": {
  //   "editor.defaultFormatter": "vscode.typescript-language-features"
  // },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# vscode vue

  • vscode-user-setting-vue.json
{
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    "typescript",
    "typescriptreact"
  ],
  "files.associations": {
    "*.vue": "vue"
  },

  "eslint.autoFixOnSave": true,
  // prettier
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.requireConfig": true,

  // editor
  "editor.formatOnPaste": true,
  "editor.formatOnSave": false,

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  • workspace config vue
{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.enable": true,
  "eslint.validate": ["javascript", "javascriptreact", "vue-html", "vue"],
  "files.autoSave": "off",
  "eslint.codeActionsOnSave.mode": "all",
  //"vetur.format.defaultFormatter.js": "vscode-typescript",
  // "vetur.format.defaultFormatter.html": "prettier",
  // "vetur.format.defaultFormatter.js": "prettier-eslint",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# vscode config

"workbench.activityBar.visible": false // 隐藏控制工作台中的活动栏

"breadcrumbs.enabled": true,  // 启用导航路径
"workbench.settings.useSplitJSON": true  // 打开默认设置配置JSON

// 自定义tab栏样式
"workbench.colorCustomizations": {
  "[One Dark Pro]": {
    // "tab.activeBackground": "#504141",
    "tab.activeBorder": "#ff0000"
  },
},
"window.titleBarStyle": "custom"
1
2
3
4
5
6
7
8
9
10
11
12
13