使用vite 创建vue3+ts项目（内涵：eslint配置、prettier配置、）

新建文件夹 vite_vue3_ts   cmd进入项目
 

//创建项目 如果没有安装vite 请安装
D:\vite_vue3_ts>npm create vite
Need to install the following packages:
  create-vite@4.4.0
Ok to proceed? (y) y
√ Project name: ... vue3_project   //项目名称
√ Select a framework: » Vue   //选择需要用到的框架  当然咱们选择的是vue
√ Select a variant: » TypeScript   //咱们选择vue3结合ts

Scaffolding project in D:\vite_vue3_ts\vue3_project...

Done. Now run:

  cd vue3_project    //进入项目
  npm install        //安装依赖
  npm run dev        //然后就可以启动项目啦 嘻嘻

1、eslint配置、
 

首先安装eslint

npm i eslint -D

生成配置文件：eslint.cjs

npx eslint --init

D:\vite_vue3_ts\vue3_project>npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.5
Ok to proceed? (y) y
? How would you like to use ESLint? ...
  To check syntax only     //仅检测语法
> To check syntax and find problems  //检查语法以及发现错误！ 当然咱们选择这个
  To check syntax, find problems, and enforce code style
> JavaScript modules (import/export)   //采用es6开发
  CommonJS (require/exports)
  None of these
> React
  Vue.js   选择vue
  None of these
? Does your project use TypeScript? » No / Yes  是否选择ts 当然选择yes
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser   选择项目运行再浏览器端
√ Node
> JavaScript   选择JS文件
  YAML
  JSON
@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes  如果选择校验vue语法 es6语法需要安装这三个插件

 .eslintrc.cjs 文件配置加说明

module.exports = {
  //工作环境
  env: {
    //浏览器端
    browser: true,
    //es6语法
    es2021: true,
  },
  //规则继承
  extends: [
    //全部规则默认是关闭，这个配置开启推荐规则，推荐规则参照文档
    //比如：函数不可重名，对象不能重复key值。
    'eslint:recommended',
    //ts语法规则
    'plugin:@typescript-eslint/recommended',
    //vue3 语法规则
    'plugin:vue/vue3-essential',
  ],
  //要为特定类型的文件指定处理器
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  //指定解析器:解析器
  //Esprima 默认解析器
  //Babe1-ESLint babe1解析器
  //@typescript-eslint/parser ts解析器
  // parser: '@typescript-esTint/parser',
  //指定解析器选项
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  //eslint 支持使用第三方插件，再使用插件时，必须使用npm安装第三方插件
  plugins: ['@typescript-eslint', 'vue'],

  //  关闭规则 ==> "off"或者0
  //  打开的规则作为警告（不影响代码执行） ==> "warn"或者1
  //  规则作为一个错误（代码不能执行，页面报错） ==> "error"或者2
  rules: {
    // eslint (https://eslint.bootcss.com/docs/rules/)
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    '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 模块
    //eslint-plugin-vue-(https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为“_”链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<templat>
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
  },
}

安装vue3环境代码校验插件

#让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "8.6.0"
'eslint-plugin-import": "2.27.5"
"eslint-plugin-node":"^11.1.0"
#运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier":"^4.2.1"
# vue.is的Eslint插件(查找vue语法错误，发现错误指令，查找违规风格指南"eslint-plugin-vue":"9.9.0"
#该解析器允许使用EsTint校瑜所有babel code"@babel/eslint-parser":"7.19.1"

安装指令 

npm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

 创建.eslintignore忽略校验文件
 

dist
node_modules

 package.json新增两个运行脚本
 

"lint": "eslint src",   //检测src下的代码
"fix": "eslint src --fix"   //自动纠正代码问题

2、配置prettier

有了eslint，为什么还要有prettier? eslint针对的是javascript,他是一个检测工具，包含is语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次;而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着千，另外，prettier支持包含is在内的多种语言。
总结起来，eslint和prettier这俩兄弟一个保证is代码质量，一个保证代码美观。

安装依赖包

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

创建prettierrc.json 文件

{
  "singleQuote": true,  //双引 单引号
  "semi": false, //语句最后分号
  "br acketSpacing": true,
  "htmlwhitespaceSensitivity": "ignore" ,
  "endofLine": "auto",
  "trailingComma": "a11",
  "tabwidth": 2 //缩进占用两个位置
}