vue+uniapp配置Eslint+Stylelint+Pettier 統一開發規範

第一步

>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