eslint

1. 安装依赖：npm install -D @eslint/create-config
2. 初始化：npx eslint --init
3. 初始化后会在项目中自动创建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',
    }
  }
];

4. 在根目录下创建.eslintignore文件，把以下内容复制粘粘替换

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
/node_modules/*
/dist*
/src/main.ts

5. 在package.json中添加命令:“eslint:fix”: “eslint --fix”

scripts": {
    "dev": "vite --mode dev",
    xxxx
    "eslint:fix": "eslint --fix",
  },

安装配置prettier

1. 安装依赖prettier：npm install -D prettier
2. 安装prettier和eslint的依赖：npm install -D eslint-config-prettier eslint-plugin-prettier
3. 在根目录创建.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
}

4. 创建.prettierignore文件，把以下内容复制粘粘替换

/node_modules/**
/dist/
/dist*
/public/*
/docs/*
/vite.config.ts
/src/types/env.d.ts
/docs/**/*
/plop/**/*
CHANGELOG

5. 配置package.json命令

"scripts": {
    "dev": "vite --mode dev",
    xxxx
    "lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}"
  },

vscode配置

1. 在扩展中安装eslint插件和Prettier - Code formatter插件
   

设置保存时自动按prettier格式化

1. 找一个xxx.vue界面，然后右键
   

2. 选择Prettier - Code formatter插件