ESLint Config Light Vue3

开箱即用的 Eslint 配置，适用于 Vue3 项目。

1. 作者

novlan1

2. 如何使用

.eslintrc.js文件：

module.exports = {
  extends: ['eslint-config-light-vue3'],
};

3. resolver

业务自行引入，解决 index.vue 报错 Unable to resolve path to module 的问题。

需安装：

• eslint-import-resolver-alias
• eslint-import-resolver-node

// .eslintrc.js
module.exports = {
 settings: {
    'import/resolver': {
      alias: {
        map: [
          // 这里参照webpack的别名配置映射
          ['src', './src'],
        ],
        // 告诉resolver-alias有哪些后缀的文件要解析
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.vue'],
      },
    },
    'import/ignore': ['node_modules'],
  },
}

4. FAQ

1. VSCode 中保存 html 时的自动格式化失败

可以参考下面，配置 .vscode/settings.json

"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[html]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
},

2. 相关依赖

pnpm i eslint-config-light-vue3@latest \
eslint-plugin-light@latest \
eslint-config-light@latest \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
eslint-plugin-jest@25 \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
@html-eslint/eslint-plugin@^0.59.0 \
@html-eslint/parser@^0.59.0 \
@typescript-eslint/[email protected] \
@typescript-eslint/[email protected] \
[email protected] \
@vue/[email protected] -D

uniapp 的配置文件参考

|文件|链接| |---|---| |.eslintrc.js|查看| |tsconfig.json|查看| |tsconfig.eslint.json|查看|

非 uniapp 的配置文件参考

|文件|链接| |---|---| |.eslintrc.js|查看| |tsconfig.json|查看| |tsconfig.eslint.json|查看|

5. 更新日志

点此查看