0.3.1 • Published 1 year ago

eslint-config-airbnb-vue3-ts v0.3.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

eslint-config-airbnb-vue3-ts

结合了 airbnbprettier 风格规范的 eslint 配置,适用于 vue3、js、ts 项目。

使用

npm i -D eslint-config-airbnb-vue3-ts

配置 .eslintrc.js 文件:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['eslint-config-airbnb-vue3-ts'],
  rules: {
    // nestjs 请关闭以下规则,避免造成程序报错
    // '@typescript-eslint/consistent-type-imports': 'off',
    // 'no-empty-function': 'off',
    // 'no-useless-constructor': 'off',
    // 'max-classes-per-file': 'off',
  },
}

配置 .prettierrc.json 文件:

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "singleQuote": true,
  "semi": false,
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "jsxSingleQuote": false,
  "bracketSameLine": false,
  "jsxBracketSameLine": false,
  "trailingComma": "all"
}

配置 .vscode/settings.json 文件,当保存代码时使用 prettier 格式化代码:

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

配置 .vscode/extensions.json 文件:

{
  "recommendations": ["Vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

这个 eslint 插件将代码格式化的规则都禁用掉了,因为项目代码特别多的时候,eslint 格式化会很慢,经常需要等待。

所以在 eslint 只保留了代码错误的检查,代码格式化的工作需要使用 vsocde + prettier 插件来完成。但是这只会在保存代码的时候格式化代码,不会在提交代码的时候格式化代码。

所以需要配置 ci/cd 工具来在提交代码的时候格式化代码,例如可以使用 lint-staged + husky 来实现。

PS:这里提供了一个 DEMO 以供参考,如果你觉得配置不生效或者出错了,可以参考这个示例。