VSCode配置Prettier和ESLint打造统一开发体验

Prettier是什么

请看这篇文章。

概括几个点：

根据 eslint 规则来格式化代码，不用自己跑脚本修改
放在项目中，项目团队一起用，代码就统一了

怎么配置

安装Prettier和ESLint

在 VSCode 的扩展中，安装 ESLint 和 Prettier ：

image.png

配置Prettier

在项目根目录下放置一个 .prettierrc.js 文件，内容如下：

module.exports = {
  tabWidth: 2,
  useTabs: false,
  semi: false,
  arrowParens: 'avoid',
  singleQuote: true,
  bracketSpacing: true,
  endOfLine: 'lf',
  trailingComma: 'none'
}

注：我个人喜欢末尾无分号的，大家可以根据已有规范配置，其实为了达到最大自动化，有些规则有妥协。

使用ESLint运行Prettier

安装 npm install --save-dev eslint-plugin-prettier
配置 .eslintrc.js ，也放在根目录下，内容如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true
  },
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
}

注：需要根据你们自身的项目情况微调。

配置editorconfig

在项目根目录下继续放置 .editorconfig 文件，内容如下：

# http://editorconfig.org

root = true

[*]
charset = utf-8
# 末尾行去掉尾随的空格
trim_trailing_whitespace = true
# 末尾行后加多一行空行
insert_final_newline = true
# <"tab" | "space"> 制表符类型
indent_style = space
indent_size = 2
# <"lf" | "cr" | "crlf"> 换行符类型
end_of_line = lf

注：关于 .editorconfig

这样的话把这几个文件提交到Git上去，别人开发同个项目也受这份开发规范限制，这样可以在项目中保证多人开发的统一性。

配置保存自动格式化

在VSCode -> 首选项 -> settings.json 中加入：

"editor.formatOnSave": true,

注：如果机器比较弱，可以不配置这个，改为自己触发格式化。

好了，现在每次保存都会按照之前配置的规范进行格式化，Done。

可能需要的参考

ESLint Rules
Prettier Options
Prettier 配置中文解释：

{
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}