众多插件里难免有几个功能相近的,选一个合适自己的就好了,我会按照自己的习惯标上(推荐)~
这会不定期更新,如果你们有什么好用的插件,也可以在评论区推荐,我会试用后添加上去的,谢谢你们啦
插件列表
| 名称 | 简述 |
|---|---|
| Auto Close Tag | 自动闭合HTML标签 |
| Auto Import | Typescript或TSX中自动import提示 |
| Auto Rename Tag | 修改HTML标签时,自动修改匹配的标签 |
| Beautify | 美化格式化代码,可通过自行配置.jsbeautifyrc自定义 |
| Better Align | 对齐赋值符号和注释 |
| Better Comments | 编写更加人性化的注释(推荐) |
| Bookmarks | 给代码行添加书签,快速换切 |
| Code Runner | 运行选中代码段(支持大量语言) |
| Code Spellchecker | 单词拼写检查 |
| Can I Use | HTML5、CSS3、SVG的浏览器兼容性检查 |
| Color Highlight | 颜色值在代码中高亮显示 |
| Color Info | 小窗口显示颜色值,rgb,hsl,cmyk,hex等等 |
| Color Picker | 拾色器 |
| Debugger for Chrome | 调试Chrome |
| ESLint | ESLint插件,高亮提示 |
| Git History | 查看git log |
| IntelliSense for CSS class names in HTML | CSS class提示 |
| HTML CSS Support | css提示(支持vue) |
| HTMLHint | HTML语法格式提示 |
| Import Cost | 行内显示导入(import/require)的包的大小 |
| JavaScript (ES6) code snippets | ES6语法代码提示 |
| JSON Tools | 格式化和压缩JSON |
| Log Wrapper | 生成所选中变量的打印语句(console.log('name' + name)) |
| Output Colorizer | 彩色化输出框中的信息 |
| Partial Diff | 对比两段代码或文件 |
| Path Intellisense | 路径完成提示 |
| Prettier | 格式化代码(html,js,css,vue...) (推荐) |
| Prettify JSON | 格式化JSON |
| Project Manager | 多个项目间管理 |
| Quokka.js | 不需要手动运行,行内显示变量结果 |
| REST Client | 直接在编辑器中发送REST风格的HTTP请求,并显示返回http信息 |
| Sass | sass插件 |
| Settings Sync | VSCode设置同步到Gist |
| Stylelint | css/sass/less代码风格规范 |
| Version Lens | package.json文件显示模块当前版本和最新版本 |
| VueHelper | Vue2代码段提示(包括Vue2 api、vue-router2、vuex2) |
| npm Intellisense | 导入模块时,提示已安装模块名称 |
| Vetur | Vue语法高亮 |
| vscode-icons | 文件图标,方便定位文件 |
| View In Browser | 快读打开浏览器Ctrl+F1 |
个人的VSCode首选项设置(仅供参考)
{
"editor.tabSize": 2,
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"vue-html"
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"git.confirmSync": false,
"window.zoomLevel": 0,
"vsicons.projectDetection.autoReload": true,
"typescript.check.tscVersion": false,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"workbench.colorTheme": "Solarized Light",
"workbench.iconTheme": "vscode-great-icons",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"tslint.autoFixOnSave": true,
"editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
"beautify.tabSize": 2,
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"typescript.extension.sortImports.maxNamedImportsInSingleLine": 5,
"typescript.extension.sortImports.omitSemicolon": true,
"editor.codeLens": true,
"editor.snippetSuggestions": "top",
"react-native-storybooks.port": 6006
}

