vue+uniapp配置Eslint+Stylelint+Pettier 统一开发规范

╰半橙微兮° 2022-09-09 06:27 846阅读 0赞

## 第一步 ##

>npm i eslint  eslint-plugin-vue -D
    >npm i babel-eslint eslint-plugin-node -D
    >npm i stylelint stylelint-config-prettier stylelint-config-standard stylelint-order -D

## 第二步 新建.eslintrc.js 文件，极简配置即可。 ##

// ESlint 检查配置
    module.exports = {
      root: true,
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      globals: { uni: true, wx: true },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      extends: ['plugin:vue/recommended', 'eslint:recommended'],
    
      // add your custom rules here
      //it is base on https://github.com/vuejs/eslint-config-vue
      rules: {
        "vue/max-attributes-per-line": [2, {
          "singleline": 10,
          "multiline": {
            "max": 1,
            "allowFirstLine": false
          }
        }],
      }
    }

##  第三步 新建.eslintignore 文件 ##

build/*.js
    src/assets
    public
    dist

## 第四步 新建stylelint.config.js文件 ##

module.exports = {
      root: true,
      plugins: ['stylelint-order'],
      extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
      rules: {
        'selector-pseudo-class-no-unknown': [
          true,
          {
            ignorePseudoClasses: ['global'],
          },
        ],
        'selector-pseudo-element-no-unknown': [
          true,
          {
            ignorePseudoElements: ['v-deep'],
          },
        ],
        'at-rule-no-unknown': [
          true,
          {
            ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin'],
          },
        ],
        'no-empty-source': null,
        'named-grid-areas-no-invalid': null,
        'unicode-bom': 'never',
        'no-descending-specificity': null,
        'font-family-no-missing-generic-family-keyword': null,
        'declaration-colon-space-after': 'always-single-line',
        'declaration-colon-space-before': 'never',
        // 'declaration-block-trailing-semicolon': 'always',
        'rule-empty-line-before': [
          'always',
          {
            ignore: ['after-comment', 'first-nested'],
          },
        ],
        'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
        'order/order': [
          [
            'dollar-variables',
            'custom-properties',
            'at-rules',
            'declarations',
            {
              type: 'at-rule',
              name: 'supports',
            },
            {
              type: 'at-rule',
              name: 'media',
            },
            'rules',
          ],
          { severity: 'warning' },
        ],
      },
      ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
    };

## 第五步 新建.stylelintignore文件 ##

/dist/*
    /public/*
    public/*

## 第六步 新建.prettier.config.js 文件 ##

module.exports = {
      // 超过最大值换行
      printWidth: 100,
      // 缩进字节数
      tabWidth: 2,
      // 缩进不使用tab，使用空格
      useTabs: false,
      // 句尾添加分号
      semi: true,
      vueIndentScriptAndStyle: true,
      // 使用单引号代替双引号
      singleQuote: true,
      quoteProps: 'as-needed',
      // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
      bracketSpacing: true,
      // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号)
      trailingComma: 'es5',
      // 在jsx中把'>' 是否单独放一行
      jsxBracketSameLine: false,
      // 在jsx中使用单引号代替双引号
      jsxSingleQuote: false,
      // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
      arrowParens: 'always',
      insertPragma: false,
      requirePragma: false,
      // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
      proseWrap: 'never',
      htmlWhitespaceSensitivity: 'strict',
      // 结尾是 \n \r \n\r auto
      endOfLine: 'lf',
      rangeStart: 0,
    };

## 第七步 新建.prettierignore 文件 ##

/dist/*
    .local
    .output.js
    /node_modules/**
    
    **/*.svg
    **/*.sh
    
    /public/*

## 第八步 package.json scripts 中增加 ##

"lint": "eslint --ext .js,.vue src",
    "lint:eslint": "eslint --cache --max-warnings 0  \"src/**/*.{vue,js}\" --fix",
    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,css,less,scss,vue,html,md}\"",
    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"

vscode可安装插件

eslint

Prettier - Code formatter