一般我們?cè)陧?xiàng)目中使用eslint和prettier來規(guī)范和約束我們的代碼

貼一份我的目錄結(jié)構(gòu)

image.png

安裝

我們?cè)谑褂胿ue-cli創(chuàng)建vue項(xiàng)目的時(shí)候會(huì)讓我們選擇校驗(yàn)方式，我們選擇ESLint + Prettier的方式，你也可以自己使用npm手動(dòng)安裝。

image.png

prettier

項(xiàng)目根目錄新建.prettierrc.json文件，貼一下我常用的配置，文件夾建完，之后我們ctrl+s保存的時(shí)候，就會(huì)按照這個(gè)規(guī)則格式化我們的代碼

{
    // tab縮進(jìn)大小,默認(rèn)為2
    "tabWidth": 4,
    // 使用tab縮進(jìn)，默認(rèn)false
    "useTabs": false,
    // 使用分號(hào), 默認(rèn)true
    "semi": false,
    // 使用單引號(hào), 默認(rèn)false(在jsx中配置無效, 默認(rèn)都是雙引號(hào))
    "singleQuote": false,
    // 行尾逗號(hào),默認(rèn)none,可選 none|es5|all
    // es5 包括es5中的數(shù)組、對(duì)象
    // all 包括函數(shù)對(duì)象等所有可選
    "TrailingCooma": "all",
    // 對(duì)象中的空格 默認(rèn)true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true,
    // JSX標(biāo)簽閉合位置 默認(rèn)false
    // false: <div
    //          className=""
    //          style={{}}
    //       >
    // true: <div
    //          className=""
    //          style={{}} >
    "jsxBracketSameLine": false,
    // 箭頭函數(shù)參數(shù)括號(hào) 默認(rèn)avoid 可選 avoid| always
    // avoid 能省略括號(hào)的時(shí)候就省略 例如x => x
    // always 總是有括號(hào)
    "arrowParens": "avoid"
}

eslint

1.項(xiàng)目根目錄新建.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential', //vue3核心的lint的規(guī)則
    'eslint:recommended', //eslint的建議規(guī)則
    '@vue/typescript/recommended',
    '@vue/prettier', //prettier建議的規(guī)則
    // '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    semi: [1, 'never'],//always（總是） 或者 never（從來不）
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': [
      'warn',
      {
        trailingComma: 'es5',
      },
    ],
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ],
};

2.選項(xiàng)說明

"root": true

默認(rèn)情況下，ESLint 會(huì)在所有父級(jí)目錄里尋找配置文件，一直到根目錄。如果發(fā)現(xiàn)配置文件中有 “root”: true，它就會(huì)停止在父級(jí)目錄中尋找。

  extends: [
    'plugin:vue/vue3-essential', //vue3核心的lint的規(guī)則
    'eslint:recommended', //eslint的建議規(guī)則
    '@vue/typescript/recommended',
    '@vue/prettier', //prettier建議的規(guī)則
    '@vue/prettier/@typescript-eslint',
  ],

一個(gè)配置文件可以從基礎(chǔ)配置中繼承已啟用的規(guī)則。如上，如果值為字符串?dāng)?shù)組則每個(gè)配置繼承它前面的配置。值為 “eslint:recommended” 的 extends 屬性啟用了eslint默認(rèn)的規(guī)則，請(qǐng)參考：https://cn.eslint.org/docs/rules/

 rules: {
    semi: [2, 'always'],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': [
      'warn',
      {
        trailingComma: 'es5',
      },
    ],
  },

ESLint 附帶有大量的規(guī)則。你可以在rules選項(xiàng)中設(shè)置，設(shè)置的規(guī)則將覆蓋上面繼承的默認(rèn)規(guī)則。要改變一個(gè)規(guī)則設(shè)置，你必須將規(guī)則 ID 設(shè)置為下列值之一：

• “off” 或 0 - 關(guān)閉規(guī)則
• “warn” 或 1 - 開啟規(guī)則，使用警告級(jí)別的錯(cuò)誤：warn (不會(huì)導(dǎo)致程序退出)
• “error” 或 2 - 開啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error (當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)

3.看一個(gè)例子：
我上面在rules里面配置了semi: [1, 'never'],，意思就是禁止使用尾部分號(hào)，但是級(jí)別是警告，那么我如果項(xiàng)目中尾部有分號(hào)，我控制臺(tái)就會(huì)報(bào)警告信息

image.png

image.png