vscode经常使用插件

Auto Close Tag自动补全关闭标签

安装便可用,你敲html标签,它能自动帮你补全。
imagecss

Auto Rename Tag自动重命名标签

在你更改标签名的时候,它会帮你把对应的关闭标签页进行一样的更改。
imagehtml

Beautify

HTML、CSS、JS、JSON SASS语法高亮,格式化代码的工具vue

ctrl+shift+p输入beautify就有提示。node

Better Comments

不一样的注释显示不一样的颜色,*,?,!起头而后开始写,你能够看到注释的颜色是不一样的
imagejquery

Bracket Pair Colorizer

对应括号显示一样的颜色,以防咱们搞混括号配对。
imagees6

Code Runner

帮助咱们运行代码的工具,好比你要运行一个js文件,打开这个文件,而后ctrl+alt+n就能够运行文件,系统自动调用node帮咱们运行文件。ajax

Document This(js 和typescript的注释模板)

ctrl+alt+D,两次(注意:新版的vscode已经原生支持,在function上输入/** tab)
imagetypescript

Easy Sass编译输出css

第一步:在 VS Code 中使用 Ctrl+Shift+P打开命令面板,输入Preferences: Open User Settings或Preferences: Open Workspace Settings。sass

usersittings
    "easysass.compileAfterSave": true, //保存即编译
    "easysass.formats": [ //nested:嵌套缩进的 css 代码。
    //expanded:没有缩进的、扩展的css代码。
    //compact:简洁格式的 css 代码。
    //compressed:压缩后的 css 代码

            {
                "format": "expanded",
                "extension": ".css"
            },
            {
                "format": "compressed",
                "extension": ".min.css"
            }
        ],
    "easysass.targetDir": "css/" //自定义输出路径,若是不定义就会默认输出跟当前sass同样的路径。

JavaScript (ES6) code snippets

es6的代码自动补全微信

jQuery Code Snippets

jquery代码自动补全,好比你要写一段ajax你须要输入jqAjax而后敲回车。

Node.js Modules IntelliSense

提供JavaScript和TypeScript导入声明时的自动补全。

Path Autocomplete 路径补全工具

image

Project Manager 项目管理工具

这两种方式对于须要常常切换项目时,比较耗时
为解决这个问题,vscode提供了Project Manager插件管理,开发时经常使用的项目

(1)command+ shift + p打开配置文件,
输入 Project Manager: Edit Projects

[
    {
        "name": "nuxtest",
        "rootPath": "e:\\nuxtest",
        "paths": [],
        "group": ""
    },
    {
        "name": "vuetest",
        "rootPath": "e:\\vuetest",
        "paths": [],
        "group": ""
    }
]

(2)在左侧图标栏下就会有个小文件夹的选项,点击进去就能够切换项目了。

Vetur

语法高亮、智能感知、Emmet等帮助咱们快速开发vue

vscode-icons 为文件管理器增长文件类型图标

image

vue-beautify

vue文件格式化,有三种用法
一、快捷键ctrl+shift+f ;
二、在文件中右键选择Beautify Vue ;
三、按f1,搜索 Beautify Vue而后点击.
image
微信搜索“魏三公子”,欢迎关注

相关文章
相关标签/搜索