Vue、uniapp（cli 创建）项目的常用配置 eslint 、 prettier 、 stylelint 、 lint-staged 、 husky 代码格式校验

常用配置项目的代码格式化，方便统一代码规范

1、安装依赖

复制到跟目录下执行命令

npm i eslint babel-eslint eslint-plugin-vue husky lint-staged prettier @vue/eslint-config-prettier eslint-plugin-prettier stylelint stylelint-config-prettier stylelint-config-standard stylelint-order -D

2、在根目录下创建以下文件写入验证规则

prettier.config.js

定义保存后格式化的规则

module.exports = {
   
  // 行宽 default:80
  printWidth: 100,
  // tab 宽度 default:2
  tabWidth: 2,
  // 使用 tab 键 default:false
  useTabs: false,
  // 语句行末是否添加分号 default:true
  semi: false,
  // 是否使用单引号 default:false
  singleQuote: true,
  // 对象需要引号在加 default:"as-needed"
  quoteProps: 'as-needed',
  // jsx单引号 default:false
  jsxSingleQuote: true,
  // 最后一个对象元素加逗号 default:"es5"
  trailingComma: 'es5',
  // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格 default:true
  bracketSpacing: true,
  // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。default:false
  jsxBracketSameLine: false,
  // (x) => {} 是否要有小括号 default:"always"
  arrowParens: 'avoid',
  // default:0
  rangeStart: 0,
  // default:Infinity
  rangeEnd: Infinity,
  // default:false
  insertPragma: false,
  // default:false
  requirePragma: false,
  // 不包装 markdown text default:"preserve"
  proseWrap: 'never',
  // HTML空白敏感性 default:"css"
  htmlWhitespaceSensitivity: 'ignore',
  // 在 *.vue 文件中 Script 和 Style 标签内的代码是否缩进 default:false
  vueIndentScriptAndStyle: true,
  // 末尾换行符 default:"lf"
  endOfLine: 'auto',
  // default:"auto"
  embeddedLanguageFormatting: 'off',
  overrides: [
    {
   
      files: '*.md',
      options: {
   
        tabWidth: 2,
      },
    },
  ],
}

.eslintrc.js

eslint 的配置

module.exports = {
   
  root: true,
  env: {
   
    browser: true,
    node: true,
    es6: true,
  },
  // 配置js全局变量，因为是uni-app，全局的uni是不需要引入的，还有5+的plus对象
  globals: {
   
    uni: 'readonly',
    plus: 'readonly',
    wx: 'readonly',
  },
  // 可根据个人喜好选择，个人比较喜欢prettier配合vs code格式化html代码，安利一波！！
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
   
    parser: 'babel-eslint',
  },
  rules: {
   
    // 'prettier/prettier': 'error',
    'no-console': [
      'warn',
      {
   
        allow: ['warn', 'error'],
      },
    ],
    'no-eval': 'error',
    'no-alert': 'error',
    'vue/max-attributes-per-line': [
      0,
      {
   
        singleline: 10,
        multiline: {
   
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/no-v-html': 'off',
    'accessor-pairs': 2,

    'block-spacing': [2, 'always'],
    'brace-style': [
      2,
      '1tbs',
      {
   
        allowSingleLine: true,
      },
    ],
    // 属性驼峰命名
    camelcase: [
      0,
      {
   
        properties: 'always',
      },
    ],
    'comma-dangle': [2, 'only-multiline'],
    'comma-style':