diy你的prettier自动格式化 + eslint校验

一、前言

写这个主要是记录下，该怎么去理解这套代码规范工具，然后才会运用熟练，毕竟定义好一套自动格式化配置可以提升不少编码效率。

二、eslint

1. vscode默认自带ts校验，所以写ts提示会比较多。
2. vscode内安装eslint、tslint插件后，在项目根目录新建.eslintrc文件，作为配置。
3. vscode开启format on save。
4. 为什么先说eslint呢，把eslint看作是一个模子，那么如何对齐把材料刚好对进去呢？

比如我某个项目下这样的配置：

// .eslintrc
{
  "extends": "eslint-config-egg/typescript", // 扩展到ts
  "parserOptions": {
    "project": "./tsconfig.json" // 通过tsconfig来解析ts
  },
  "rules": {
    "object-curly-spacing": [2, "always", { // 对象内设置可间隔空格
      "objectsInObjects": false
    }],
    "array-bracket-spacing": [2, "never"] // 数组中括号[]不可间隔空格
  }
}

三、prettier

1. 首先vscode安装prettier插件。
2. 配置格式化文档的方式为prettier（记住不要选择默认配置，默认配置只适合简单js、ts文件）。
3. 根目录下新建.prettierrc文件。

{
  "singleQuote": true, // 单引号
  "bracketSpacing": true, // 对象内需要间隔空格
  "arrowParens": "avoid", // 有一个参数的箭头函数的参数是不带圆括号
  "printWidth": 150, // 代码换行所需字符长度
  "trailingComma": "es5" // 尾随逗号（注意使用es5支持，json数据并不支持尾随逗号）
}

四、总结

所以prettier是为了定义好的eslint规范而去做适配的，简单理解，就是用一套自动格式化去匹配定义的规范。