---
title: "2020 我在使用VScode时安装的插件（针对前端开花推荐）"
id: "2838"
type: "post"
slug: "2020-%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: "2020-04-17T22:34:10+00:00"
modified_at: "2020-04-17T22:34:35+00:00"
url: "https://seq.ink/all/2838.html"
markdown_url: "https://seq.ink/all/2838.html.md"
excerpt: "针对前端开花的VScode插件推荐 呐，半年前分享过一次插件推荐，但是即使vscode打上很多的插件开发效率仍然无法与一些IDE相比（webstrom phpstrom….）但是随着版本的更新vscode也集成了一些热门的功能而 ..."
taxonomy_category:
  - "ALL"
  - "Share分享"
---

## 针对前端开花的VScode插件推荐

#### 呐，半年前分享过一次插件推荐，但是即使vscode打上很多的插件开发效率仍然无法与一些IDE相比（webstrom phpstrom….）但是随着版本的更新vscode也集成了一些热门的功能而且插件质量也有所提升，最近开发都在使用VScode逐渐的减少使用webstrom。

呐在这里F_picacho向大家分享下我在使用VScode整理出的插件清单供大家参考。 针对上一次的分享内容有删改，因为vscode最新版集成了一些功能所以有的插件可以删除了，留着影响运行效率。

---

#### 主题类

默认的vscode暗色系非常生硬，开发过程极影响心情。有一款能让自己愉快编码的主题也会在一定程度上提升编程效率和灵感。当然，不同人对于视觉的偏好是不同的。

[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)
 中文简体语言包

---

#### 通用类

[Prettier – Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
 一键Prettier风格 输入一串指令皆可把代码改变成流行的[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
风格

注意这里需要进行对seetings.json文件进行配置 否则可能无法正常使用  
 ctrl+shift+p进入搜索 搜索seetings.json  
 插件其启用快捷键

```
// 默认代码风格配置shift+alt+f 或者直接使用指令Format Selection
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"window.zoomLevel": 0,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
```

[Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag)
 修改 html 标签，自动帮你完成尾部闭合标签的同步修改

[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
 资源文件自动路劲补全

[Preview on Web Server](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server)
 热更新服务器 ctrl+shift+v在视窗内启动预览窗口 ctrl+shift+l在浏览器预览

这里不推荐live server 因为很长时间没有更新了 后期使用还有一些跨域的问题

[open in browser](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser)
 以本地的方式打开文件 支持所有内核浏览器 启用快捷键alt+shift+b

[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
 标记代码块方便审计代码

[JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
 提示追加ES6语法模板

---

#### CSS预处理语言类

[Easy Sass](https://marketplace.visualstudio.com/items?itemName=spook.easysass)
 编译Sass文件 不需要安装额外的执行环境 但是需要进行配置

```
    
// Easy sass插件配置
    "easysass.compileAfterSave": true, 
    "easysass.formats": [
           {
               "format": "expanded",
               "extension": ".css"
           },
           {
               "format": "compressed",
               "extension": ".min.css"
           }
       ],
    "easysass.targetDir": "./css/",
    "workbench.iconTheme": "material-icon-theme" //路径
```

[Sass](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)
 Sass语法提示

---

#### VUE类

[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
 Vue语法提示 高亮

[Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
 Vue语法模板快捷输入