VSCode 拓展插件推荐——提高 Node 和 Vue 开发效率
xcfp2400
7年前
<h2>插件列表</h2> <p><a href="/misc/goto?guid=4959738438827728981" rel="nofollow,noindex">Auto Close Tag</a> 自动闭合HTML标签</p> <p><a href="/misc/goto?guid=4959738438920340425" rel="nofollow,noindex">Auto Rename Tag</a> 修改HTML标签时，自动修改匹配的标签</p> <p><a href="/misc/goto?guid=4959738439008786246" rel="nofollow,noindex">Bookmarks</a> 添加行书签</p> <p><a href="/misc/goto?guid=4959738439086464299" rel="nofollow,noindex">Can I Use</a> HTML5、CSS3、SVG的浏览器兼容性检查</p> <p><a href="/misc/goto?guid=4959738439172951751" rel="nofollow,noindex">Code Runner</a> 运行选中代码段（支持大量语言，包括Node）</p> <p><a href="/misc/goto?guid=4959738439255569957" rel="nofollow,noindex">CodeBing</a> 在VSCode中弹出浏览器并搜索，可编辑搜索引擎</p> <p><a href="/misc/goto?guid=4959738439337963809" rel="nofollow,noindex">Color Highlight</a> 颜色值在代码中高亮显示</p> <p><a href="/misc/goto?guid=4959738439434202000" rel="nofollow,noindex">Color Picker</a> 拾色器</p> <p><a href="/misc/goto?guid=4959738439515662385" rel="nofollow,noindex">Document This</a> 注释文档生成</p> <p><a href="/misc/goto?guid=4959738439600131466" rel="nofollow,noindex">EditorConfig for VS Code</a> <a href="/misc/goto?guid=4959738439684288761" rel="nofollow,noindex">EditorConfig</a> 插件</p> <p><a href="/misc/goto?guid=4959738439768378408" rel="nofollow,noindex">Emoji</a> 在代码中输入emoji</p> <p><a href="/misc/goto?guid=4959738439849210279" rel="nofollow,noindex">ESLint</a> ESLint插件，高亮提示</p> <p><a href="/misc/goto?guid=4959738439947276651" rel="nofollow,noindex">File Peek</a> 根据路径字符串，快速定位到文件</p> <p><a href="/misc/goto?guid=4959738440026715247" rel="nofollow,noindex">Font-awesome codes for html</a> FontAwesome提示代码段</p> <p><a href="/misc/goto?guid=4959738440108888349" rel="nofollow,noindex">ftp-sync</a> 同步文件到ftp</p> <p><a href="/misc/goto?guid=4959738440192308221" rel="nofollow,noindex">Git Blame</a> 在状态栏显示当前行的Git信息</p> <p><a href="/misc/goto?guid=4959738440283074027" rel="nofollow,noindex">Git History(git log)</a> 查看git log</p> <p><a href="/misc/goto?guid=4959738440361715175" rel="nofollow,noindex">GitLens</a> 显示文件最近的commit和作者，显示当前行commit信息</p> <p><a href="/misc/goto?guid=4959738440448036684" rel="nofollow,noindex">Guides</a> 高亮缩进基准线</p> <p><a href="/misc/goto?guid=4959738440540224098" rel="nofollow,noindex">Gulp Snippets</a> Gulp代码段</p> <p><a href="/misc/goto?guid=4959738440622884555" rel="nofollow,noindex">HTML CSS Class Completion</a> CSS class提示</p> <p><a href="/misc/goto?guid=4959738440707271888" rel="nofollow,noindex">HTML CSS Support</a> css提示（支持vue）</p> <p><a href="/misc/goto?guid=4959738440793379742" rel="nofollow,noindex">HTMLHint</a> HTML格式提示</p> <p><a href="/misc/goto?guid=4959738440876760589" rel="nofollow,noindex">Indenticator</a> 缩进高亮</p> <p><a href="/misc/goto?guid=4959738440961871546" rel="nofollow,noindex">JavaScript (ES6) code snippets</a> ES6语法代码段</p> <p><a href="/misc/goto?guid=4959738441043828165" rel="nofollow,noindex">language-stylus</a> Stylus语法高亮和提示</p> <p><a href="/misc/goto?guid=4959738441128029765" rel="nofollow,noindex">Lodash</a> Lodash代码段</p> <p><a href="/misc/goto?guid=4959738441210086036" rel="nofollow,noindex">markdownlint</a> Markdown格式提示</p> <p><a href="/misc/goto?guid=4959738441295757367" rel="nofollow,noindex">MochaSnippets</a> Mocha代码段</p> <p><a href="/misc/goto?guid=4959738441371680555" rel="nofollow,noindex">Node modules resolve</a> 快速导航到Node模块</p> <p><a href="/misc/goto?guid=4959738441454178813" rel="nofollow,noindex">npm</a> 运行npm命令</p> <p><a href="/misc/goto?guid=4959738441545294232" rel="nofollow,noindex">npm Intellisense</a> 导入模块时，提示已安装模块名称</p> <p><a href="/misc/goto?guid=4959738441627408289" rel="nofollow,noindex">Output Colorizer</a> 彩色输出信息</p> <p><a href="/misc/goto?guid=4959738441713203035" rel="nofollow,noindex">Partial Diff</a> 对比两段代码或文件</p> <p><a href="/misc/goto?guid=4959738441794521557" rel="nofollow,noindex">Path Autocomplete</a> 路径完成提示</p> <p><a href="/misc/goto?guid=4959738441872992619" rel="nofollow,noindex">Path Intellisense</a> 另一个路径完成提示</p> <p><a href="/misc/goto?guid=4959738441955100155" rel="nofollow,noindex">Prettify JSON</a> 格式化JSON</p> <p><a href="/misc/goto?guid=4959738442047432623" rel="nofollow,noindex">Project Manager</a> 快速切换项目</p> <p><a href="/misc/goto?guid=4959738442134113890" rel="nofollow,noindex">REST Client</a> 发送REST风格的HTTP请求</p> <p><a href="/misc/goto?guid=4959738442217360527" rel="nofollow,noindex">Settings Sync</a> VSCode设置同步到Gist</p> <p><a href="/misc/goto?guid=4959738442306022217" rel="nofollow,noindex">String Manipulation</a> 字符串转换处理（驼峰、大写开头、下划线等等）</p> <p><a href="/misc/goto?guid=4959738442388234222" rel="nofollow,noindex">Test Spec Generator</a> 测试用例生成（支持chai、should、jasmine）</p> <p><a href="/misc/goto?guid=4959738442466208279" rel="nofollow,noindex">TODO Parser</a> Todo管理</p> <p><a href="/misc/goto?guid=4959738442556498703" rel="nofollow,noindex">Version Lens</a> package.json文件显示模块当前版本和最新版本</p> <p><a href="/misc/goto?guid=4959738442645256101" rel="nofollow,noindex">vetur</a> 目前比较好的Vue语法高亮</p> <p><a href="/misc/goto?guid=4959738442729894815" rel="nofollow,noindex">View Node Package</a> 快速打开选中模块的主页和代码仓库</p> <p><a href="/misc/goto?guid=4959738442804648179" rel="nofollow,noindex">vscode-icons</a> 文件图标，方便定位文件</p> <p><a href="/misc/goto?guid=4959738442899431445" rel="nofollow,noindex">VSCode Great Icons</a> 文件图标拓展</p> <p><a href="/misc/goto?guid=4959738442980991999" rel="nofollow,noindex">VueHelper</a> Vue2代码段（包括Vue2 api、vue-router2、vuex2）</p> <h3>附录：VSCode首选项配置</h3> <pre> { "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" }, "extensions.autoUpdate": true, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "workbench.welcome.enabled": true }</pre> <p> </p> <p>来自：https://github.com/varHarrie/Dawn-Blossoms/issues/10</p> <p> </p>