Ant Design Pro 脚手架Eslint+Prettier配合使用

Ant Design Pro 脚手架集成了Eslint与Prettier，但Eslint与Prettier还没形成关联性，就是他们之间各玩各的，现在需要他们之间关联，就是当Prettier格式出现问题时，eslint会报相应的错误提示

插件安装

npm install eslint-config-prettier eslint-plugin-import eslint-plugin-prettier --save-dev

.eslintrc.js 配置

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint'), 'plugin:prettier/recommended'],
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
    REACT_APP_ENV: true,
  },
  plugins: ['import'],
  rules: {
    'prettier/prettier': 1,
    '@typescript-eslint/no-use-before-define': 0,
    '@typescript-eslint/no-unused-expressions': 0,
    'no-param-reassign': 1,
    '@typescript-eslint/no-this-alias': 1,
    //不能有声明后未被使用的变量或参数[此声明针对的是jsx文件，tsx有自己的校验规则]
    '@typescript-eslint/no-unused-vars': 0,
    'no-unused-vars': [
      1,
      {
        vars: 'all',
        args: 'after-used',
      },
    ],
    //统一小驼峰命名
    camelcase: ['error', { properties: 'always' }],
    'react/jsx-key': 2,
  },
};

.prettierrc.js 配置

const fabric = require('@umijs/fabric');
module.exports = {
  ...fabric.prettier,
  // 一行的字符数，如果超过会进行换行，默认为80
  printWidth: 150,
  // 一个tab代表几个空格数，默认为80
  tabWidth: 2,
  // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
  useTabs: false,
  // 字符串是否使用单引号，默认为false，使用双引号
  singleQuote: true,
  // 行位是否使用分号，默认为true
  semi: true,
  // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  trailingComma: 'all',
  // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  bracketSpacing: true,
};