注意:eslint目前升级到9版本了
在 ESLint v9 中,配置文件已经从 .eslintrc
迁移到了 eslint.config.js
配置的方式和之前的方式不太一样了!!!!
详见自己的语雀文档:5、新版eslint9+prettier 配置
eslint.config.js
import { defineConfig } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import Prettier from 'eslint-plugin-prettier/recommended'
import ts from '@typescript-eslint/eslint-plugin'
import tsParser from '@typescript-eslint/parser'export default defineConfig([{ files: ['**/*.{js,mjs,ts,vue}'] },{files: ['**/*.{js,mjs,ts,vue}'],languageOptions: { globals: globals.browser }},{files: ['**/*.{js,mjs,ts,vue}'],plugins: { js },extends: ['js/recommended']},tseslint.configs.recommended,pluginVue.configs['flat/essential'],{files: ['**/*.vue'],languageOptions: { parserOptions: { parser: tseslint.parser } }},{files: ['**/*.ts', '**/*.tsx'], // 针对 TypeScript 文件languageOptions: {parser: tsParser // 使用 TypeScript 解析器},plugins: {'@typescript-eslint': ts // 启用 @typescript-eslint 插件},rules: {'@typescript-eslint/no-explicit-any': 'off' // 关闭 any 类型的检查}},Prettier //注意必须放最后,不然eslint的默认配置会给prettier的规则覆盖掉
])
.prettierrc.cjs
module.exports = {printWidth: 120, // 每行代码长度(默认80)tabWidth: 2, // 每个tab相当于多少个空格(默认2)useTabs: false, // 是否使用tab进行缩进(默认false)singleQuote: true, // 使用单引号(默认false)semi: false, // 声明结尾使用分号(默认true)trailingComma: 'none', // 多行使用拖尾逗号(默认none)bracketSpacing: true, // 对象字面量的大括号间使用空格(默认true)jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾,而不是另起一行(默认false)arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号(默认avoid)proseWrap: 'preserve', // 编辑器自动换行endOfLine: 'auto' // 换行符
}
这个时候我准备再配置一下css的代码格式化规范,安装Stylelint
如果你希望将 Stylelint 集成到 ESLint 的工作流中,可以使用
eslint-plugin-stylelint
插件。这样,你可以在运行 ESLint 时同时检查 CSS 文件。
原因:
eslint-plugin-stylelint
目前只支持 ESLint v8,而我的项目使用的是 ESLint v9,因此出现了依赖冲突。
注意:如果不集成在eselint,eslint-plugin-stylelint
目前只支持 ESLint v8,而你的项目使用的是 ESLint v9,
解决方案:单独运行 Stylelint,而不通过 ESLint 集成或者使用prettier格式化等等。。。我没试过,后来没有配置css文件的代码格式化了。。。。。不管了