前端项目vue3项目集成eslint@9.x跟prettier
tips: 这些涉及编辑器的修改不一定能及时生效,如果没有生效,可以试试重启编辑器窗口
编辑器集成
我的编辑器是vscode,需要安装这两个编辑器插件
eslint
prettier
我这个配置主要是通过eslint提供的配置cli命令生成,在里面加入了对prettier的支持。
eslint官方提供的命令,根据他的提供的选项一项一项选就可以了,我这里是生成的ts + vue的项目
npm init @eslint/config@latest
生成的最初代码
import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";export default defineConfig([{ files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], plugins: { js }, extends: ["js/recommended"] },{ files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], languageOptions: { globals: globals.browser } },tseslint.configs.recommended,pluginVue.configs["flat/essential"],{ files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
]);
我安装的项目中的插件
eslint-config-prettier (关闭 ESLint 中所有与 Prettier 冲突的格式化规则(如缩进、引号、分号等),避免重复检查和修复冲突)
eslint-plugin-prettier (将 Prettier 的格式化规则作为 ESLint 规则运行,使 Prettier 的格式问题通过 ESLint 报错,并支持 eslint --fix 自动修复)
.prettierc.json (prettier的格式化配置规则,放在项目根目录中)
{"printWidth": 150,"tabWidth": 2,"semi": false,"singleQuote": true,"trailingComma": "none","bracketSpacing": true,"bracketSameLine": true,"arrowParens": "always","endOfLine": "auto"
}
最终完整代码
import js from '@eslint/js'
import globals from 'globals'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'
import EslintConfigPrettier from 'eslint-config-prettier'
import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended'export default defineConfig([{ files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'], plugins: { js }, extends: ['js/recommended', pluginPrettierRecommended] },{files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],languageOptions: {globals: {...globals.browser,...globals.node}}},tseslint.configs.recommended,pluginVue.configs['flat/essential'],{ files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },{rules: {// 这条规则是说如果变量未被更改,则应用const声明,// 这里写出来的原因是只有ts文件有效,而vue文件中没有自动修复,我就在这里重写了,保证行为一致'prefer-const': ['error',{destructuring: 'any',ignoreReadBeforeAssign: false}],'vue/multi-word-component-names': 'off'}},EslintConfigPrettier
])