前端代码格式化实践 eslint + prettier

需求背景

多人合作开发需要对代码格式进行规范，为了方便和统一我们可以借助前端代码格式化工具，可以借助eslint来规定代码规范，prettier进行代码格式化。

实践（vue项目）

vscode配置setting.json文件,写入下面规则，在保存代码时自动格式化代码

 {
    "editor.formatOnSave": true
 }

安装相关依赖（具体用处之后补充）

npm i eslint 
eslint-config-airbnb-base
eslint-config-prettier
eslint-loader
eslint-plugin-import
eslint-plugin-prettier
eslint-plugin-vue
prettier 
pretty-quick -D

添加并配置 .prettierrc 文件，进行prettier格式化配置（可根据eslint里设置的检测规则进行相应配置）

{
  "printWidth": 130, // 超过最大值换行
  "tabWidth": 2, // 缩进字节数
  "useTabs": false, // 缩进不使用tab,使用空格
  "semi": false, // 句尾是否添加分号
  "singleQuote": true, //是否使用单引号
  "arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "bracketSpacing": true, // 在对象、数组括号与文字间加空格
  "jsxBracketSameLine": true,
  "endOfLine": "auto", // 结尾是 \n \r \n\r 
  "eslintIntegration": true, //让prettier按照eslint的代码格式进行校验
  "htmlWhitespaceSensitivity": "ignore",
  "trailingComma": "all" // 在对象或数组最后一个元素后面是否加逗号
}

配置eslintrc.js，可以根据官网内容按照自己的规范进行配置,不一一解释了

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    '@vue/standard',
    '@vue/typescript',
    'plugin:prettier/recommended',
    'plugin:vue/essential',
    'prettier/vue',
  ],
  plugins: ['vue'],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren': [0, 'never'],
    'vue/array-bracket-spacing': 'error',
    'vue/arrow-spacing': 'error',
    'vue/block-spacing': 'error',
    'vue/brace-style': 'error',
    'eslint(vue/no-use-v-if-with-v-for': 0,
    'vue/camelcase': 0,
    camelcase: 0,
    'comma-dangle': [
      'error',
      {
        arrays: 'only-multiline',
        objects: 'only-multiline',
        imports: 'never',
        exports: 'never',
        functions: 'never',
      },
    ],
    'vue/component-name-in-template-casing': 'error',
    'vue/max-attributes-per-line': [
      0,
      {
        singleline: 5,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
    'vue/eqeqeq': 'error',
    'vue/singleline-html-element-content-newline': 0,
    'vue/html-closing-bracket-newline': 0,
    'vue/key-spacing': 'error',
    'vue/match-component-file-name': 'error',
    'vue/object-curly-spacing': 0,
    'vue/html-self-closing': 0,
    semi: ['error', 'never'],
    'no-trailing-spaces': 0,
    'no-tabs': 'off',
    'prettier/prettier': 0,
  },
  overrides: [
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        jest: true,
      },
    },
  ],
}

添加 vscode 相关插件

vetur
eslint
prettier-code formatter