2、一堆配置（从0开始练习Vue3+Vite+Ts）

eslint

安装 eslint
npm i eslint -D
生成eslint配置文件
npx eslint --init
运行命令后会在根目录生成一个.eslintrc.cjs文件
如果你想要生成一个特定格式的配置文件，比如JSON或YAML，可以使用--ext选项：
npx eslint --init --ext .js
会创建一个.eslintrc.json文件，并且只对扩展名为.js的文件进行lint。

然后会问你

选字多的那个

然后又问你

选Javascript modules

然后又问

选vue.js

又问

选yes

哎呀，又问

选browser、yes、npm

完事儿后会生成一饿eslint 的配置文件
注意：ESLint 生态中存在两种配置文件格式：
.eslintrc.*，在 Eslint 9 之前的配置文件
eslint.config.js ，eslint 9 之后推出的新的扁平化的配置文件(flat-config)

我这里是eslint.config.js，逐行进行解释

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";


/* @type {import('eslint').Linter.Config[]} */
export default [
  
  /** 这一行定义了一个配置对象，它指定了 ESLint 应该检查哪些文件
  files 属性包含了一个数组，数组中的字符串是一个 glob 模式，它匹配了项目中所有的 .js、.mjs、.cjs、.ts 和 .vue 文件。
  这意味着 ESLint 将对这些文件类型进行检查。*/
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]}, 
  /**  这一行定义了一个配置对象，用于设置语言选项。
  在这里，languageOptions 属性被用来指定全局变量。
  globals 属性被设置为 globals.browser，这通常是一个对象，包含了在浏览器环境中可用的全局变量。
  这样设置可以避免 ESLint 将这些全局变量误报为未定义。
  需要注意的是，globals.browser 应该在配置文件的上下文或外部被定义，否则这里会导致引用错误。*/
  {languageOptions: { globals: globals.browser }},
  /** 这一行引用了名为 pluginJs 的插件中的 recommended 配置。
  这通常意味着包含了一组推荐的规则，用于检查 JavaScript 代码的质量和风格。
  pluginJs 应该是之前在项目中安装和配置的 ESLint 插件。 */
  pluginJs.configs.recommended,
  /** 这一行使用了扩展操作符 ... 来展开 tseslint.configs.recommended 配置数组。
  tseslint 可能是一个用于 TypeScript 文件的 ESLint 插件，而 recommended 配置通常包含了一组针对 TypeScript 的推荐规则。
  这样，这些推荐规则就会被添加到当前的配置数组中 */
  ...tseslint.configs.recommended,
  /** 类似地，这一行展开了 pluginVue.configs["flat/essential"] 配置数组。
  pluginVue 应该是针对 Vue.js 文件的 ESLint 插件，
  而 "flat/essential" 可能是该插件提供的一种特定配置模式，包含了一组针对 Vue.js 的基本或核心规则。 */
  ...pluginVue.configs["flat/essential"],
  /** 这一行定义了一个专门针对 .vue 文件的配置对象。
  files 属性指定了只匹配 .vue 文件。
  languageOptions 属性中的 parserOptions 指定了用于解析这些文件的解析器，这里设置为 tseslint.parser，意味着使用 tseslint 插件提供的解析器来解析 Vue 文件中的代码。
  这确保了 TypeScript 语法在 Vue 单文件组件中的正确解析和检查。 */
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];

接下来往里填规则

    rules: {
      // eslint（https://eslint.bootcss.com/docs/rules/）
      'no-var': 'error', // 要求使用 let 或 const 而不是 var
      'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
      'no-unexpected-multiline': 'error', // 禁止空余的多行
      'no-useless-escape': 'off', // 禁止不必要的转义字符

      // typeScript (https://typescript-eslint.io/rules)
      '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
      '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
      '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
      '@typescript-eslint/no-non-null-assertion': 'off',
      '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
      '@typescript-eslint/semi': 'off',

      // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
      'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
      'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
      'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
      'vue/attribute-hyphenation': 'off' // 对模板中的自定义组件强制执行属性命名样式
    }

设定忽略文件
在项目根目录新建 .eslintignore 文件，并写入如下代码：

dist
node_modules

添加脚本
在 packjson.json 中 script 字段中添加俩行命令

"eslint": "eslint src",
"fix": "eslint src --fix"

检测是否生效
使用 var 数据类型，终端运行 pnpm run eslint 命令，出现如下错误说明 eslint 安装并配置成功

接着试运行修复命令 pnpm run fix，修复成功，证明配置成功

prettier

安装 prettier

npm install -D eslint-plugin-prettier prettier eslint-config-prettier

装包完成之后在终端运行 npm run eslint 命令，查看本次装包是否影响项目
npm run eslint

根目录下新建 .prettierrc.json 文件，并填入如下代码

{
    "printWidth": 100,
    "tabWidth": 2,
    "useTabs": true,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "bracketSameLine": true,
    "arrowParens": "always",
    "htmlWhitespaceSensitivity": "ignore",
    "vueIndentScriptAndStyle": false,
    "endOfLine": "auto",
    "singleAttributePerLine": false
}

说明：

设置忽略文件
根目录下新建 .prettierignore 文件并填入如下代码：

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

在eslint.config.js里配置一下，让prettier生效

在import那一堆处写一句

import prettierEslint from 'eslint-plugin-prettier/recommended'

在export default 里写一句 prettierEslint

然后同样去main.ts随便写个console验证一下

看样子是生效了
再运行npm run fxix 自动修复一下

设置路径

先装一个@types/node
‌@types/node的作用是为TypeScript项目提供Node.js的类型定义，以便在使用Node.js的API时获得代码补全和类型检查的支持。

npm install @types/node

在vite.config.js里写这么两句

在tsconfig.json里写

很成功，我真是个天才！