zxd's Blog

Appearance

Vite

Vite 创建项目vue3-ts项目 ​

Vite 需要 Node.js 版本 18+，20+ => Vite 5

bash
pnpm create vite
# 需要手动输入项目名 选择  vue  ts等

一句话生成

bash
# pnpm
pnpm create vite vue3-basic --template vue-ts

文件结构以及推荐插件 ​

Vue.js

代码规范ESLint ​

安装eslint ​

bash
pnpm i eslint -D 
# -D 安装到开发环境 devDependencies
pnpm create @eslint/config   ？？

# pnpm i eslint -S：将 eslint 安装为生产依赖项。  =>  --save
# pnpm i eslint -D：将 eslint 安装为开发依赖项。  =>  --save-dev

#查看eslint版本
npx eslint --version

自动生成配置文件 ​

bash
# 注意，这里只能使用npm，相当于启动一个命令
npm init @eslint/config

image.png

javascript
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

ESLint 可用的 Rules 一个 rule 有三个等级 ,

  1. 0 代表关闭 off
  2. 1 代表 warning输出警告 warn
  3. 2 代表错误，会直接抛出错误。error
typescript
"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

Rules Reference - ESLint - Pluggable JavaScript Linter

ESlint Rules ​

typescript
  rules: {
    semi: 0,
  },
  extends: "eslint:recommended",

prettier ​

Vue3+Vite项目，如何配置ESLint和Prettier实现代码规范化？

typescript
// 1. 根目录下新建 .prettierrc, 去掉注释
{
    "semi":false,    // 是否带分号
    "singleQuote":true,  // 是否单引号
    "trailingComma":"none",  // 多行语句是否最后添加逗号
    "arrowParens": "avoid", // 箭头函数一个参数是否省略括号，avoid省略
}

{
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "trailingComma": "none"
}

vite添加ESLint插件 ​

https://www.npmjs.com/package/vite-plugin-eslint

bash
pnpm i vite-plugin-eslint -D

vite.config.ts中添加配置

typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 1.导入
import eslint from 'vite-plugin-eslint' 

// https://vitejs.dev/config/
export default defineConfig({
  // 2. 配置，注意需要加()
  plugins: [vue(), eslint()]
})

// 注意 TS找不到类型文件，暂时不配置

.eslintrc.cjs配置文件修改

javascript
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  overrides: [
    {
      env: {
        node: true
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script'
      }
    }
  ],
  // 换个位置
  extends: 'eslint:recommended',
  // 去掉ts相关的，用vue自己的
  //   parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  //   plugins: ['@typescript-eslint'],
  rules: {
    semi: 0
  }
}

添加 Vue 官方的ESLint 插件 ​

目前还没发验证 Vue 文件的语法，会直接报错，因为出现了这样的标签。 https://eslint.vuejs.org/

bash
npm install --save-dev eslint-plugin-vue

pnpm i eslint-plugin-vue -D

修改配置文件 eslintrc.cjs

javascript
// 原来的规则就替换一下为vue3的
extends: ['plugin:vue/vue3-recommended'],

所有的规则列表：https://eslint.vuejs.org/rules 一些规则组：（规则越来越多） https://eslint.vuejs.org/user-guide/#configuration-eslintrc

  • "plugin:vue/vue3-essential" ... base, plus rules to prevent errors or unintended behavior.
  • "plugin:vue/vue3-strongly-recommended" ... Above, plus rules to considerably improve code readability and/or dev experience.
  • "plugin:vue/vue3-recommended" ... Above, plus rules to enforce subjective community defaults to ensure consistency.

添加基于 Typescript 的特殊规则组 ​

目前还没法验证 Typescript 的语法，一些符号会报错，比如泛型的括号。 https://www.npmjs.com/package/@vue/eslint-config-typescript

bash
npm install @vue/eslint-config-typescript --save-dev
pnpm i @vue/eslint-config-typescript -D

最终使用的是 typescript-eslint 它其实是 https://typescript-eslint.io/rulesl一个Vue 的特供版本。 添加对应的 extends

javascript
"extends": ["plugin:vue/vue3-essential","@vue/eslint-config-typescript"]

Getting Started | typescript-eslint

bash
pnpm add --save-dev eslint typescript typescript-eslint

vscode插件 ​

  1. Error Lens Improve highlighting of errors 代码报错提升
  2. Pretty TypeScript Errors ts报错 解决建议