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 \
eslint-config-rookie@1.1.2 \
eslint@8.57.1 \
eslint-import-resolver-alias@1.1.2 \
eslint-import-resolver-node@0.3.9 \
eslint-plugin-import@2.26.0 \
eslint-plugin-jest@25 \
eslint-plugin-light@1.0.3 \
eslint-plugin-prettier@4.2.1 \
eslint-plugin-react@7.26.1 \
eslint-plugin-react-hooks@4.2.0 \
eslint-plugin-tailwindcss@3.18.0 \
eslint-plugin-vue@9.14.0 \
@html-eslint/eslint-plugin@^0.59.0 \
@html-eslint/parser@^0.59.0 \
@typescript-eslint/eslint-plugin@7.18.0 \
@typescript-eslint/parser@7.18.0 \
typescript@5.5 \
@vue/tsconfig@0.7.0 -D

uniapp 的配置文件参考

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

非 uniapp 的配置文件参考

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

5. 更新日志

点此查看