VS code常用的几个插件

摘自：https://baijiahao.baidu.com/s?id=1705954692361682804&wfr=spider&for=pc

摘自：https://blog.csdn.net/weixin_39631932/article/details/111527622

VScode是一个我最近才开始用的编辑器，在此列几个自己在用的插件，以备换机时的需要。

auto close tag
beautify css/sass/scss/less
one dark theme
scss intellisense
vscode great icons
vscode-icons
vue 2 snippets

syntax highlight for vue.js
.vue component syntax highlight

=========================

View In Browser

预览页面（ctrl+F1）

vscode-icons

侧栏的图标，对于一个有视觉强迫症的人是必须要的

HTML Snippets

支持HTML5的标签提示

HTML CSS support

css自动补齐

JS-CSS-HTML Formatter

格式化

jQuery Code Snippets

jquery 自动提示

Path Autocomplete

路径自动补齐

Npm Intellisense

npm包代码提示

ESLint

检测JS必备

Debugger for Chrome

方便调试

Auto Rename Tag

自动同步修改标签

Bootstrap 3 Snippets

bootstrap必备

Vue 2 Snippets

vue必备

background

一个萌萌的插件，可以自己设置vsc的背景图

=========================

1.VsCode官方插件地址：

http://code.visualstudio.com/docs

2.使用方法，可以在官网中搜索需要的插件或者在VsCode的“”扩展“”中搜索需要的插件

添加方法使用Ctrl+P, 输入 ext install xxxx ，搜索要安装的插件，点击安装按钮即可

3.常用插件说明：

一、HTML Snippets

超级使用且初级的H5代码片段以及提示

二、HTML CSS Support

让HTML标签上写class智能提示当前项目所支持的样式

三、Debugger for Chrome

让vscode映射chrome的debug功能，静态页面都可以用vscode来打断点调试、配饰稍微复杂一点

四、jQuery Code Snippets

jquery提示工具

五、Path Intellisense

自动路径补全、默认不带这个功能

六、Npm Intellisense

require 时的包提示

七、Document this

Js的注释模板

八、ESlint

ESlint接管原声js提示，可以自定制体会规则。这个比较高玩、

九、Project Manager

多个项目之间快速切换的工具

十、beautiful

格式化代码的工具

十一、Typings Installer

安装vscode 的代码提示依赖库，基于typtings的，比如提示angular或者jQuery只能感知、至于什么是typtings自己去百度。

十二、Bootstrap 3 Sinnpet

常用bootstrap的可以下

十三、Auto Rename Tag

修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。

图标、代码样式插件

一、JavaScript Atom Grammar

使用atom风格的语法高亮、对于习惯浏览atom风格代码高亮的人实用。

二、vscode-icon

让vscode资源目录加上图标、必备

三、One Dark Theme

来自Atom的one dark主题好看实用

四、Material、Material Neutral ............

vscode 文件高亮插件_实用的Visual Studio Code插件

1.vscode-color-highlight------颜色代码高亮插件。(sublime text也有)

2.vscode-Open in Browser------右键在浏览器打开。(sublime text也有)

3.vscode-Path Intellisense------文件路径提示。(sublime text也有)

4.vscode-JS-CSS-HTML Formatting------js-css-html格式化。(sublime text也有)

5.vscode-Visual Studio Code Format------vscode代码格式增强工具。(右键格式化)

6.vscode-Sass------sass/scss文件语法提示。(sublime text也有)

7.vscode-Easy Sass------scss编译成css，min.css。(不错的一个sass编译工具)

8.vscode-csscomb------css属性排序。(sublime text也有)

9.vscode-HTML Class Suggestions------工作空间class代码提示。

PS：(1)npm install csscomb -g

npm install csscomb --save-dev

这两步是必须的。

(2)配置vscode

打开“文件”-“首选项”-“设置”。找到“csscomb configuration”选项。添加“csscomb.preset”选项。

模式有三种，csscomb, yandex, zen。任选其一。

(3) 选中css/less/scss文件,运行按F1，输入"csscomb"，回车即可。

特别注意一点，“csscomb.preset”选项还可以这样配置的。

10.vscode-fake------生成各种假数据类型。(姓名，电话)

11.vscode-CSS Peek------class名字定义跳转。(终于拥有dw cc的这个css定义跳转功能)

12.vscode-eCSStractor-----抽取页面的class，生成一个css文档。

13.vscode-Regex Previewer------正则匹配预览。

14.vscode-Quokka------js实时编译。(相当于边写边输出控制台信息)。

15.vscode-SVG Viewer------svg预览。

16.vscode-Change Case-----变量名命名风格切换。(解决了命名风格不统一的工具)

17.vscode-Document This-----jsdoc注释生成。

18.vscode-Live Server-----http服务器(相当于使用nodejs的http-server )。

PS：vscode底部可以点击运行，十分方便。

vue框架

18.vscode-Vue 2 Snippets------vue2的语法高亮，语法提示。

19.vscode-Vetur------vue单文件能够像html，js，css一样编写，注释。

20.vscode-wpy-beautify------vue2单文件格式化。

PS：vscode确实是一个不错的编辑器。

与sublime text3对比，有以下优点。

1.文件搜索功能。

有一个很好的文件浏览器去筛选文件，查找，修改，替换。

2.文件拖拽移动。

3.默认集成终端。无需装插件去打开终端。
————————————————
版权声明：本文为CSDN博主「weixin_39631932」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39631932/article/details/111527622

posted on 2017-01-26 11:19 liuruyi007 阅读(766) 评论(0) 收藏举报