eslint
- 安装依赖：npm install -D @eslint/create-config
- 初始化：npx eslint --init
- 初始化后会在项目中自动创建eslint.config.js文件，把以下内容复制粘粘替换
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";export default [{files: ["**/*.{js,mjs,cjs,ts,vue}"]},{languageOptions: { globals: {...globals.browser, ...globals.node} }},pluginJs.configs.recommended,...tseslint.configs.recommended,...pluginVue.configs["flat/essential"],{ files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },{// 自定义规则rules: {'vue/no-setup-props-destructure': 'off','vue/script-setup-uses-vars': 'error','vue/no-reserved-component-names': 'off','@typescript-eslint/ban-ts-ignore': 'off','@typescript-eslint/explicit-function-return-type': 'off','@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/no-var-requires': 'off','@typescript-eslint/no-empty-function': 'off','vue/custom-event-name-casing': 'off','no-use-before-define': 'off','@typescript-eslint/no-use-before-define': 'off','@typescript-eslint/ban-ts-comment': 'off','@typescript-eslint/ban-types': 'off','@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/explicit-module-boundary-types': 'off','@typescript-eslint/no-unused-vars': 'off','no-unused-vars': 'off','space-before-function-paren': 'off','vue/attributes-order': 'off','vue/one-component-per-file': 'off','vue/html-closing-bracket-newline': 'off','vue/max-attributes-per-line': 'off','vue/multiline-html-element-content-newline': 'off','vue/singleline-html-element-content-newline': 'off','vue/attribute-hyphenation': 'off','vue/require-default-prop': 'off','vue/require-explicit-emits': 'off','vue/html-self-closing': ['error',{html: {void: 'always',normal: 'never',component: 'always'},svg: 'always',math: 'always'}],'vue/multi-word-component-names': 'off','vue/no-v-html': 'off',}}
];
- 在根目录下创建.eslintignore文件，把以下内容复制粘粘替换
/build/
/config/
/dist/
/*.js
/test/unit/coverage/
/node_modules/*
/dist*
/src/main.ts
- 在package.json中添加命令:“eslint:fix”: “eslint --fix”
scripts": {"dev": "vite --mode dev",xxxx"eslint:fix": "eslint --fix",},
安装配置prettier
- 安装依赖prettier：npm install -D prettier
- 安装prettier和eslint的依赖：npm install -D eslint-config-prettier eslint-plugin-prettier
- 在根目录创建.prettierrc.cjs文件，，把以下内容复制粘粘替换
module.exports = {printWidth: 100,tabWidth: 2,useTabs: false,semi: false,vueIndentScriptAndStyle: false,singleQuote: true,quoteProps: 'as-needed',bracketSpacing: true,trailingComma: 'none',jsxSingleQuote: false,arrowParens: 'always',insertPragma: false,requirePragma: false,proseWrap: 'never',htmlWhitespaceSensitivity: 'strict',endOfLine: 'auto',rangeStart: 0
}
- 创建.prettierignore文件，把以下内容复制粘粘替换
/node_modules/**
/dist/
/dist*
/public/*
/docs/*
/vite.config.ts
/src/types/env.d.ts
/docs/**/*
/plop/**/*
CHANGELOG
- 配置package.json命令
"scripts": {"dev": "vite --mode dev",xxxx"lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}"},
vscode配置
- 在扩展中安装eslint插件和Prettier - Code formatter插件
设置保存时自动按prettier格式化
-
找一个xxx.vue界面，然后右键
-
选择Prettier - Code formatter插件
