推荐插件

Chinese (Simplified) Language Pack for Visual Studio Code (中文包 安装即可)
vscode-icons 图标美化
Debugger for Chrome 调试

Beautify 代码格式化
ESLint 代码规范
JavaScript (ES6) code snippets javascript语法提示
view in browser   （在浏览器打开html文件）

Sass sass文件高亮&格式化
Easy Sass (转义Sass为css)
HTML Snippet (HTML语法扩展 安装即可)
TypeScript Importer (import等引入文件时智能提示 安装即可)
VSCode Great Icons  (文件图标)

vetur vue必备
VueHelper vue及相关技术栈语法提示

Auto Close Tag 自动闭合标签
Path Autocomplete 自动补全路径

Markdown All in One markdown支持

使用ESLint

1. 打开 Visual Studio Code，快捷键 Ctrl + Shift + P 调出VsCode的控制台
   输入命令 ext install ESLint安装ESLint插件

2. 打开cmd跳转node安装目录文件夹,输入npm install eslint -g 全局安装esLint

3. cmd进入项目文件夹输入npm init，然后输入eslint --init

4. 问题:1 您想如何配置EsLIt？
   使用流行风格指南(Use a popular style guide) -- Y
   回答有关你的风格的问题(Answer questions about your style)
   检查你的JavaScript文件( Inspect your JavaScript file(s))
   问题:2 你想遵循什么样的风格指南？
   Airbnb (https://github.com/airbnb/javascript)
   Standard (https://github.com/standard/standard)标准 -- Y
   Google (https://github.com/google/eslint-config-google)谷歌
   问题：3 您希望配置文件处于什么格式？
   JavaScript
   YAML
   JSON -- Y
   问题： 4 您想用NPM安装它们吗？（y/n） y
   // 安装完毕: eslintrc.json

// eslintrc.json
{
    "extends": "standard",
    "rules": {
        "no-console": "off",
        "generator-star-spacing": "off",
        "space-before-function-paren": [
            0,
            "always"
        ],
        "eol-last": 0,
        "no-unused-vars": [
            0,
            {
                "vars": "all",
                "args": "after-used"
            }
        ],
        "semi": [
            0,
            "always"
        ],
        "no-sequences": 0,
        "no-trailing-spaces": 0,
        "no-unexpected-multiline": 0,
        "prefer-promise-reject-errors": 0,
        "one-var": 0,
        "no-useless-return": 0,
        "no-extend-native": 0,
        "node": 0,
        "valid-typeof": 0,
        "indent": 0,
        "no-multi-spaces": 0
    }
}

快捷方式、

1. 新建index.htm 然后输入!，然后按Tab，可快速生成html模板

使用Sass

1. 下载安装Ruby
2. 安装好ruby以后，打开cmd，输入gem install sass`安装SASS
3. 扩展里搜索Sass(智能提示) 并安装
4. 扩展里搜索Easy Sass(转义sass为css) 并安装
5. 打开配置搜索easysass
   image.png

{
/*  设置编译输出的 css 风格
     format参数：
     nested：嵌套缩进的 css 代码。
　　 expanded：没有缩进的、扩展的css代码。
　　 compact：简洁格式的 css 代码。
　　 compressed：压缩后的 css 代码。
*/
    "easysass.formats": [
        {
            "format": "compressed",  // 压缩
            "extension": ".min.css"   // 输出的文件名
        }
    ],
    "easysass.targetDir": "./src/css/",  // 自定义css输出文件路径(当前打开目录的路径)
}

使用VSCode Great Icons

安装并启用后，文件 > 首选项 > 文件图标主题 > VSCode Great Icons