vs code 的深度使用

同步插件配置

教程可以走这篇文章https://www.cnblogs.com/knight-errant/p/10444777.html
但是有坑，会报这个错误Sync: Invalid Gist ID
原因是gits 与 token 不是一个东西
所以你可以走这篇文章https://www.cnblogs.com/hebdzw/p/11456325.html
但是也有坑，你访问不了这个github 下的特定网站。所以你可以看我工具篇的科学上网解决。

插件篇

Bookmarks

这个功能就是可以在代码里面打上一个书签，然后用快捷键跳到书签的位置，比如你的代码500行，你在200行定义了变量，在400行的时候写了一个函数用到这个变量，你要在两者间快速切换查看，可以用到这个书签（ps:xdm有更好的方法评论告诉我）

Google Translate

变量翻译功能

Live Server

可以开一个本地服务器，说实话，我没怎么用。

Live Share

多人协作，就是说别人在自己电脑上可以改你电脑上的代码，有机会一定要尝试一下

Settings Sync

同步vs code 配置插件

GitLens — Git supercharged

可以看到谁动了你的代码

koroFileHeader

可以生成头部配置

stylus

就是stylus 的扩展

Bracket Pair Colorizer

括号高亮，特别好。

Auto Close Tag

当你编写双标签时，只需要写开始标签就会自动出来结尾标签。

Auto Rename Tag

这个是编写HTML双标签时遇到需要改标签名时只需要改其中一个标签另一个开始或者结束标签就会自动修改。

IntelliSense for CSS class names in HTML

这个插件是为了方便起class名字的插件，如果你还在为取什么类名而烦恼的话就下载他吧，它会根据你当前的环境以及输入的首个字母自动为你推荐class类名。（这个插件我不知道使用方法）。

HTML CSS Support

支持HTML 写CSS样式有提示（vue 无效，可能需要改什么配置）。

CSS Peek

在HTML里面鼠标移到类名上按住ctrl+单击，会直接跳转到这个类名设置的样式文件及样式位置（我的vue 无效，可能需要什么配置）。

vscode-fileheader

这个插件是一个js的头部生成注释按钮，我觉得很不错的一个插件，这个插件需要一些配置，这个配置在你下载的时候都有教你怎么配置，这里我就不多写了。（不知道写的啥）

JavaScript (ES6) code snippets

es6 的代码提示，个人感觉很有用啊

JavaScript Snippet Pack

js代码片段（必备）

Node.js Modules Intellisense

可以在导入语句中自动完成JavaScript / TypeScript模块。（就是自动提示第三方依赖的意思）

Output Colorizer

在控制台上，输出提示的文字颜色有一些变化。比如成功 错误等。

vscode-faker

生成假数据，地址，电话，图片等等
打开方式shift+cmd+p(shift+ctrl+p)) 然后输入faker 就可以选择了

VueHelper

vue代码片段，感觉比Vue 2 Snippets好用，

Vue 2 Snippets

vue2代码片段

lorem

生成排版字符；

html2jade，提供html到jade的互转；

search node_modules

快速定位 node_modules 安装文件。

代码格式化篇

代码格式化我现在的套路就是eslint prettier vetur eslint 是用来做语法上的规范的，vetur 是对vue文件的格式化的，但是它本身在格式化能力上不强，所以需要prettier做支持。
首先vs code 的格式化你可以在本地配置，和工作区配置，鉴于我们每个团队项目的格式化需求不同，所以建议你配置到工作区；
ctrl + shift + p
输入 setting 就可以进入设置文件。你会在你的项目目录下看到如下文件；

image

然后在里面复制我如下代码

{
    // vetur的配置 我还是比较喜欢vetur 来做vue的格式化，prettier一些功能的支持，eslint 是在代码还在没有运行做eslint检查

    /* vue 文件的配置 */

    // 格式化vue 文件的默认插件
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur" // 使用vuter 格式化vue 文件
    }, //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript", // 处理js 部分的插件
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前面加上空格
    "vetur.format.scriptInitialIndent": false, //默认script标签缩进
    "vetur.format.styleInitialIndent": false, //默认style标签缩进
    // vetur 的配置依赖prettier插件，有些配置必须这种写法
    "vetur.format.defaultFormatterOptions": {
        // "prettier": {
        //     "printWidth": 12000,
        //     "semi": false, //无分号
        //     "singleQuote": true, //单引号
        //     "TrailingCooma": true, //让对象里面有个空格
        //     "eslintIntegration": true // 是否用eslint 整合
        // },
        "js-beautify-html": {
            "wrap_line_length": 220, //换行长度
            "wrap_attributes": "auto", //属性换行
            "end_with_newline": false  //以换行符结尾
        }
    },
    "vetur.format.options.tabSize": 4, // 空格缩进

    /* js 文件的配置 */

    // 格式化js 文件的插件
    "[javascript]": {
        "editor.defaultFormatter": "svipas.prettier-plus"
    },

    /* prettier的配置 */

    "prettier.tabWidth": 4, // 空格缩进
    "prettier.printWidth": 300, // 超过最大值换行
    "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验

    /* json 文件的配置 */

    // 格式化json 文件的插件
    "[json]": {
        "editor.defaultFormatter": "svipas.prettier-plus" // 使用prettier 格式化json 文件
    },
    "vetur.validation.template": false
    /* 结束 */
}