配置項目規(guī)范editorconfig+eslint+prettier

詳細介紹可以看一下這篇文章代碼規(guī)范之-理解ESLint、Prettier、EditorConfig (baidu.com)

.editorconfig

root = true
# 說明
# 設置文件編碼為 UTF-8
# 用兩個空格代替制表符
# 控制縮進大小
# 在保存時刪除尾部的空白字符
# 在文件末尾添加一個空白行

[*]
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
end_of_line = lf
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

eslint 配置注意點

1. 安裝eslint

npm install eslint -D or yarn add eslint

2. 配置.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true, // browser global variables
    es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
    node: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 12,
  },
  rules: {
    semi: ['error', 'never'],
    quotes: ['error', 'single']
  }
}

當配置完上面選項，在src下面新建一個index.js（ts也是可以的）使用雙引號，結尾加分號就會有紅色的提示，如果eslint 沒有生效，重啟一下vscode

image.png

然后我們使用下面的命令校驗，控制臺就會打印出提示

npx eslint src/index.js

image.png

然后使用下面的命令,不符合規(guī)則的代碼就被修復了

npx eslint --fix src/index.js

image.png

注意： 我們使用npx測試eslint的時候可以不用在vscode安裝eslint插件，但是我們總不能每次寫完代碼都要手動去執(zhí)行npx eslint ... 這樣效率也太低了，所以需要安裝eslint插件，并且配置setting.json （ctrl+shift+p打開），保存后就可以修復我們的代碼

{
    // 保存自動修復
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}

此時js，ts都可以進行校驗了，我們再測試vue文件里面是否也可以進行校驗,進入文件發(fā)現(xiàn)文件名已經(jīng)變紅了，說明有錯誤，鼠標放到script標簽上提示Parsing error: Unexpected token <eslint> ，這是因為eslint默認不支持對vue校驗，需要安裝對應的插件 eslint-plugin-vue

npm install eslint-plugin-vue or yarn add eslint-plugin-vue

.eslintrc.js 中添加

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 12,
  },
  extends: ['plugin:vue/vue3-recommended'],
  rules: {
    semi: ['error', 'never'],
    quotes: ['error', 'single']
  }
}

現(xiàn)在eslint 校驗對vue文件已經(jīng)起作用了，注意如果代碼有報錯，eslint不會工作，

3. 到目前為止我們使用的校驗規(guī)則是eslint默認和我們自己配置的規(guī)則，為了規(guī)范團隊成員代碼格式，以及保持統(tǒng)一的代碼風格，項目采用當前業(yè)界最火的Airbnb規(guī)范，

npm install eslint-config-airbnb-base -D or yarn add eslint-config-airbnb-base -D

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 12,
  },
  extends: ['plugin:vue/vue3-recommended','airbnb-base'],
  rules: {
    semi: ['error', 'never'],
    quotes: ['error', 'single']
  }
}

vue3+ts 項目中如何對ts文件以及vue文件進行校驗

yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier -D

注意：如果配置好了，但是沒有生效，重啟vscode

// .eslintrc.js
module.exports = {
  plugins: ['@typescript-eslint'],
  // Prerequisite `eslint-plugin-vue`, being extended, sets
  // root property `parser` to `'vue-eslint-parser'`, which, for code parsing,
  // in turn delegates to the parser, specified in `parserOptions.parser`:
  // https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error
  parserOptions: {
    parser: require.resolve('@typescript-eslint/parser'),
    extraFileExtensions: ['.vue'],
  },
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/eslint-recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  overrides: [
    {
      files: ['*.ts', '*.tsx', '*.vue'],
      rules: {
        // The core 'no-unused-vars' rules (in the eslint:recommeded ruleset)
        // does not work with type definitions
        'no-unused-vars': 'off',
        semi: ['error', 'never'],
      },
    },
  ],
}

.prettierrc.js
module.exports = {
  useTabs: false,
  tabWidth: 2,
  printWidth: 120,
  singleQuote: true,
  semi: false,
  trailingComma: 'none',
  bracketSpacing: true,
  endOfLine: 'auto',
  ignorePath: '.prettierignore', // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中
}

此時就完成了eslint+prettier配置，還是有沖突的地方，需要按需修改