--- title: "我在使用VScode时安装的插件（针对前端开花推荐）" id: "2363" type: "post" slug: "%e6%88%91%e5%9c%a8%e4%bd%bf%e7%94%a8vscode%e6%97%b6%e5%ae%89%e8%a3%85%e7%9a%84%e6%8f%92%e4%bb%b6%ef%bc%88%e9%92%88%e5%af%b9%e5%89%8d%e7%ab%af%e5%bc%80%e8%8a%b1%e6%8e%a8%e8%8d%90%ef%bc%89" published_at: "2019-08-25T15:57:06+00:00" modified_at: "2019-08-25T16:00:27+00:00" url: "https://seq.ink/all/2363.html" markdown_url: "https://seq.ink/all/2363.html.md" excerpt: "针对前端开花的VScode插件推荐 使用了大概小半年的VScode进行前端开发，虽然默认的一些功能很好用但是还是不及HBuilderX或者WebStorm使用的顺手。本人曾经安装过大量的插件优化VScode的前端编辑体验，但是按照网上的一些 ..." taxonomy_category: - "ALL" --- ## 针对前端开花的VScode插件推荐 ### 使用了大概小半年的VScode进行前端开发，虽然默认的一些功能很好用但是还是不及HBuilderX或者WebStorm使用的顺手。本人曾经安装过大量的插件优化VScode的前端编辑体验，但是按照网上的一些乱七八糟的推荐总是出现插件冲突导致语法提示失效或者有一些功能干脆就没使用过。 ###### 呐在这里F_picacho向大家分享下我在使用VScode整理出的插件清单供大家参考。 --- #### 主题类 默认的VScode样式看着实在提不起干劲= =！开发过程，有一款能让自己愉快编码的主题也会在一定程度上提升编程效率和灵感。当然，不同人对于视觉的偏好是不同的。 [https://i.loli.net/2019/08/25/flGUIj3bxNsp9nz.png](https://i.loli.net/2019/08/25/flGUIj3bxNsp9nz.png) [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 文件类型添加对应的图标展示 [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) 一款看着更柔顺的主题 [Chinese (Simplified) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans) 中文简体语言包 --- #### 通用类 [HTML Boilerplate](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate) HTML 模版插件 [https://i.loli.net/2019/08/25/hMl1QW37z4jfkXd.png](https://i.loli.net/2019/08/25/hMl1QW37z4jfkXd.png) [Prettier – Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 一键Prettier风格 [https://i.loli.net/2019/08/25/opNRMUYJuTvtLBa.png](https://i.loli.net/2019/08/25/opNRMUYJuTvtLBa.png) [Color Info](https://marketplace.visualstudio.com/items?itemName=bierner.color-info) 预览色块中色彩模型的相关信息 [Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag) 修改 html 标签，自动帮你完成尾部闭合标签的同步修改 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 建立一个本地服务器实时预览 [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) 让 html 标签上写class 智能提示当前项目所支持的样式，新版已经支持scss文件检索 [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) 资源文件自动路劲补全 [jQuery Code Snippets](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets) jQuery患者必备 #### VUE插件类 ###### 当然个人感觉Vue最好还是用HBuilderX= =！ vetur 语法高亮、智能感知、Emmet等 VueHelper snippet代码片段 Import Cost 引入包大小计算,对于项目打包后体积掌握很有帮助 --- 补充： HTMLHint html代码检测 ### 1 条评论 1. 发现Preview on Web Server 比Live Server更好用欸 评论已关闭。