Vue 3 + TypeScript + Vite + eslint +prettier

创建项目

使用vite脚手架创建项目

使用下述命令就可以根据脚手架配置项目，接下来可以根据自己项目的需要就可以选择对应的包来安装，可以官网查看详细步骤vite创建项目。这部分不是我们的重点，我们的重点是配置eslint。

npm init vite@latest

vue3+vite 安装 eslint

eslint 是针对于 javaScript 文件检查工具

npm install eslint -D
npx eslint --init

之后选择 PS D:\desktop\项目\my-project\my-vite-admin> 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.6 Ok to proceed? (y) y
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser √ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest ? Would you like to install them now? » No / Yes

使用prettier校验代码

校验 vue3 语法使用eslint-plugin-vue插件

安装以下包文件

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

配置.eslintrc.js 文件

const path = require('path');
module.exports = {
  root: true,
  env: {
    node: true,
  },
  globals: {
    window: true,
    document: true,
  },
  "extends": [],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint", "vue"],
  //配置自定义规则
  rules: {},
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', path.resolve(__dirname, './src')],
        ],
        extensions: ['.ts', '.js', '.jsx', '.json', '.vue'],
      },
    },
  },
  overrides: [
    
  ],
}

extends

是用来设置eslint默认规则的,根据推荐规则的位置来设置对应的优先级，如下面配置的优先级顺序为eslint:recommended>plugin:vue/essential>plugin:@typescript-eslint/recommended

extends:[
    "eslint:recommended",
    "plugin:vue/essential",
    "plugin:@typescript-eslint/recommended"
 ]

parser和parserOption

eslint会对我们的代码进行校验，parser的作用就是将我们写的代码转为ESTree(一种AST抽象语法树)，然后对ESTree进行校验eslint默认的parser只能转换js，默认支持es5语法，可以通过parserOption给Espree传递规则配置

"parserOptions": {
  //设置检测的js的版本
   "ecmaVersion": 6,
   //源文件的类型script或者module下的js文件
   "sourceType": "module",
  //  js的格式
   "ecmaFeatures": {
      "jsx": true
    }
}

overrides

在@babel/esint-parser和@typescript-eslint/parser的文档中都有提到对方，@babel/esint-parser支持解析ts语法，但不支持使用@babel/eslint-plugin中的规则对ts进行lint。在@typescript-eslint/parser文档中也有提及，并且表明并没有计划支持同时使用这两个parser。vue-eslint-parser中可以配置的额外parser是针对script标签中的内容进行解析使用的，但是因为存在历史包袱，所以script标签中仍打算使用js进行编写。所以vue-eslint-parser中必须使用@babel/ealint-parser进行解析。

{
      files: ['*.js', '*.jsx'],
      parser: '@babel/eslint-parser',
      parserOptions: {
        babelOptions: {
          configFile: path.resolve(__dirname, './babel.config.js'),
        },
      },
      extends: ['airbnb-base'],
    },
    {
      files: ['*.ts'],
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      extends: ['airbnb-base', 'plugin:@typescript-eslint/recommended'],
    },
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@babel/eslint-parser',
        babelOptions: {
          configFile: path.resolve(__dirname, './babel.config.js'),
        },
      },
      extends: ['airbnb-base', 'plugin:vue/recommended'],
    },

rules用来配置规则

这部分根据项目的需要配置自定义规则，也可以采用plugins配置的推荐规则。

{
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    indent: ["off", "tab"],
    // "linebreak-style": ["error", "unix"],
    quotes: ["error", "double"],
    semi: ["off", "always"],
    // eslint 规则 比如
    "comma-spacing": [2,
      {
        // 强制在逗号前后使用一致的间距  例  a , b   or a, b
        before: false,
        after: true
      }
    ],
    "key-spacing": [2,
      {
        // 在对象文本属性中的键和值之间强制实施一致的间
        beforeColon: false,
        afterColon: true
      }
    ],
    "no-var": "error", //禁止使用var定义变量
}

配置.eslintignore 文件

node_modules
dist

设置eslint脚本，在package.json文件中

"script":{
  "lint":"eslint src",//校验src文件夹下的文件
  "fix": "eslint src --fix"//修复src文件下文件
}

配置 prettier 文件

可以根据自己的需要，配置prettier实现在保存的时候对代码格式化，需要安装，prettier-code插件，并且在vscode中setting中设置格式化工具为prettier,也可以右击鼠标选择格式化代码的工具。

{
  // 一行最多多少个字符
  "printWidth": 150,
  // 指定每个缩进级别的空格数
  "tabWidth": 2,
  // 使用制表符而不是空格缩进行
  "useTabs": true,
  // 在语句末尾是否需要分号
  "semi": false,
  // 是否使用单引号
  "singleQuote": false,
  // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
  "quoteProps": "as-needed"
}

如果eslint和prettier冲突可以在rules中设置

"rules": {
    "prettier/prettier": "error"//off
  }

error表示被prettier标记的地方抛出错误信息,off表示忽略prettier的报错

记录eslint配置的时候的错误提示和解决方案

1. 标签的问题

Parsing error: '>' expected.eslint

解决方案：在.eslintrc.js配置文件

module.exports= {
  parser: "vue-eslint-parser"
}
 

2. 使用node模块时使用import导入解决方案

import path from "path"

//安装@types/node可以在node模块中使用import/export语法

npm install @type/node --save-dev

3. 解决引入.vue文件报错,在vite-env.d.ts

/// <reference types="vite/client" />
declare module "*.vue" {
  import { ComponentOptions } from "vue"
  const componentOptions: ComponentOptions
  export default componentOptions
}

项目初始化：

配置环境变量

1. 在根目录下创建.env.xxx文件
2. vite可以自定义变量，但是必须以VITE_开头才能曝露给外部读取，如下：

    NODE_ENV="development"
    VITE_APP_TITLE="开发环境"
    VITE_APP_BASE_API="/api"
    VITE_APP_NAME="开发"
  ```
3. 在package.json中配置运行的环境
  ```json
  "scripts": {
    "dev": "vite",
    "dev:net": "vite --force --host",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "fix": "eslint src --fix",
    "test":"vite --mode test",
    "upload":"vue-tsc && vite build --mode upload"
  },
  ```
4. 通过import.meta.env可以查看当前环境变量的对象


项目中使用SVG图表
1. 先安装SVG依赖插件 vite-plugin-svg-icons
```js
npm i -D vite-plugin-svg-icons

2. 在vite.config.ts中配置插件

import {createSvgIconsPlugin} from "vite-plugin-svg-icons"
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs:[path.resolve(process.cwd(),"src/assets/icons-svg")],//将来使用的svg图标的存放路径
      symbolId:"icon-[dir]-[name]",//以#号开头,如#icon-open
    })
  ]
})

3. 在main.ts中配置代码，用于注册svg图标

import "virtual:svg-icons-register"

4. 在assets目录下创建对应的svg文件，在组件中使用,不用引入

<!-- 使用SVG图表,svg是图标的外层结构，
    内部需要与use标签的xlink:href结合使用,
    也可以使用use的fill属性来设置图形的填充颜色，
    也可以使用svg来设置图片的大小
-->
<svg style="width:30px;height:30px">
    <use xlink:href="#icon-pen" fill="red"></use>
  </svg>