vs code编辑器的几款插件与配置（持续更新。。。）

localHistory - 查看历史的修改记录

• 只要编辑过，一定会留下痕迹，非常方便（主要不要忘记把本地自动生成的.history文件夹添加至.gitignore），解决冲突的制胜法宝
  
  

小小介绍一下背景，某天下午3个前端搞到一个面上，那个冲突哗啦啦的呀，一顿操作之后，我的代码就咻的一下没有了呀，撤回各种操作不行啊，都是在本地的啊，开始找插件记录本地操作历史续命了，

chinese - 编辑器汉化

• 汉化vscode, 重启后可以生效。

Better Comments - 代码注释高亮

• 示例

• 安装完毕后，放入如下代码

test () {
  // ! 红色的高亮注释
  // ? 蓝色的高亮注释
  // * 绿色的高亮注释
  // todo 橙色的高亮注释
  // // 灰色带删除线的注释
  // 普通的注释
}

Live Server- 启动本地服务

• 加载功能的本地开发服务器，以处理静态和动态页面

Bracket Pair Colorizer - 多层括号匹配

• 给()、[]、{}这些常用括号显示不同颜色，当点击对应括号时能够用线段直接链接到一起，让层次结构一目了然

koroFileHeader - 头部注释和函数注释的插件

• 示例

• 配置

// 修改位置：设置 => settings.json 配置文件中新增
{
    "fileheader.configObj": {
        "autoAdd": true, // 自动添加头部注释开启才能自动添加
    },
        //此为头部注释
    "fileheader.customMade": {
        "Author": "lijuan.sun",  // 作者信息，可改为自己的拼音缩写
        "Date": "Do not edit", // 文件创建时间(不变)
        "LastEditors": "lijuan.sun", // 文件最后编辑者
        "LastEditTime": "Do not edit", // 文件最后编辑时间
        "PageTitle": "XXX页面", // 页面标题
        "Description": "XXX", // 页面描述
        "FilePath": "" //  文件在项目中的相对路径，自动更新
    },
        //此为函数注释
    "fileheader.cursorMode": {
        "Author": "lijuan.sun",
        "description": "",
        "param": "",
        "return": ""
    }
}

ESLint

• 配置

// 修改位置：设置 => settings.json 配置文件中新增
{
  "prettier.tabWidth": 4,
  "vetur.format.defaultFormatter.html": "prettier",
     "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
  "eslint.validate": [
    "javascript",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

• 安装vetur插件
• 右击文档格式方式，选择vetur, 文档格式化后，再进行保存

EditorConfig for VS Code

文件目录 右击 选择“Generate.editorconfig”,(可见下图)，自动创建.editorconfig。

参考示例：

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# http://editorconfig.org

root = true

[**]

# 编码格式
charset = utf-8

# 文件结尾符
end_of_line = lf
insert_final_newline = true

# 去除行尾空白字符
trim_trailing_whitespace = true

# space 缩进
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

[{package.json,.babelrc,.eslintrc}]
indent_style = space
indent_size = 2

[*.yml]
indent_style = space
indent_size = 2

属性配置参考图：

更多属性参考地址：https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties