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
])