vscode最佳配置、插件

因为一些特殊原因,导致系统重装,所以vscode的一些配置、插件也就随之丢失了。故,记录一下。

插件

  1. Beautify
     美化 javascript, JSON, CSS, Sass, 以及 HTML 。一般需要配合.jsbeautifyrc使用

  2. Eslint
     检查代码是否符合规范

  3. GitLens
     Git提示

  4. language-stylus
     stylus语法支持

  5. Markdown All in One
     Markdown语法快捷键

  6. Material Icon Theme
     多样化的文件图标

  7. One Dark Pro
     一款深黑色的主题

  8. Path Intellisense
     相对、绝对路径提示

  9. Prettier formatter
     代码格式化

  10. Python
     Python支持

  11. React Native Snippet
     React Native 语法片段扩展

  12. Setting Sync
     同步本地vscode编辑器的设置到github

  13. Vetur
     Vue语法支持。包括语法高亮、语法代码提示、语法lint检测等

  14. Vue VSCode Snippets
     Vue 语法片段扩展

  15. npm Intellisense
     import、require npm模块是自动补全

配置

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
{
// 异步保存编辑器配置相关
"sync.gist": "30exxxxxxxxxxxxxxxxxxxxxxxxxxxxxd91", // GitHub不会保存此ID,需要本地保存,以防丢失
"sync.quietSync": false,
"sync.removeExtensions": true,
"sync.syncExtensions": true,
"sync.autoDownload": false,
"sync.autoUpload": false,
"sync.forceDownload": false,
// git显示推送提示
"git.showPushSuccessNotification": true,
// git路径
"git.path": "E:/Program Files/Git/bin/git.exe",
// git自动拉取
"git.autofetch": true,
// 编辑器默认缩进
"editor.tabSize": 2,
// 编辑器图标主题
"workbench.iconTheme": "material-icon-theme",
// 编辑器颜色主题
"workbench.colorTheme": "One Dark Pro Vivid",
// 配置文件关联,以便启用对应的智能提示,比如wxss使用css
"files.associations": {
"*.vue": "vue",
"*.wxss": "css"
},
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 配置emmet对文件类型的支持,比如vue后缀文件按照html文件来进行emmet扩写
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
// xml类型文件默认都是单引号,开启对非单引号的emmet识别
"xml": {
"attr_quotes": "single"
}
},
// 在react的jsx中添加对emmet的支持
"emmet.includeLanguages": {
"jsx-sublime-babel-tags": "javascriptreact"
},
// 默认开启eslint
"eslint.enable": true,
// 文件保存时,是否自动根据eslint进行格式化
"eslint.autoFixOnSave": true,
// eslint vue支持,并且支持自动格式化
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// prettier进行格式化时是否安装eslint配置去执行,建议false
"prettier.eslintIntegration": true,
// 如果为true,将使用单引号而不是双引号
"prettier.singleQuote": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
}
坚持原创技术分享,您的支持将鼓励我继续创作!