Vite vue3 ts 项目 配置 eslint、prettierrc

目录

VS code需要安装的插件

初始化项目

安装、配置eslint、prettierrc

安装配置eslint

安装配置prettierrc

解决 eslint 和 prettier 的冲突

配置保存（Ctrl + s）自动格式化代码

---

VS code需要安装的插件

Vue Language Features (Volar) - Visual Studio Marketplace

language-postcss - Visual Studio Marketplace

ESLint - Visual Studio Marketplace

Prettier - Code formatter - Visual Studio Marketplace

使用pnpm包管理工具

初始化项目

# 创建vue-ts项目
pnpm create vite my-vue-app --template vue-ts
# 进入项目
cd my-vue-app
# 安装依赖
pnpm install

安装、配置eslint、prettierrc

安装配置eslint

安装eslint

# 安装eslint
pnpm install eslint -D

 初始化eslint 

# 初始化eslint
pnpm eslint --init

依次选择下列选项 

You can also run this command directly using 'npm init @eslint/config'.

? How would you like to use ESLint? ...
To check syntax and find problems

? What type of modules does your project use? ...
JavaScript modules (import/export)

? Which framework does your project use? ...
Vue.js

? Does your project use TypeScript? » No / Yes
Yes

? Where does your code run? ... (用空格选中两个，回车确定)
√ Browser
√ Node

? What format do you want your config file to be in? ...
JavaScript

The config that you've selected requires the following dependencies:

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

 最后一个提示，拷贝依赖使用pnpm安装

pnpm install eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D

初始化完成后得到， .eslintrc.cjs文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

在package.json,添加命令

"scripts":{
    // lint当前项目中的文件并且开启自动修复
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
}

运行命令

pnpm run lint 

 报错提示：

 修改.eslintrc.cjs 文件，

// 修改eslint配置与添加规则

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    // 新增，解析vue文件 开始
    "parser":"vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    // 新增，解析vue文件 结束
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    // 添加规则
    "rules": {
        "@typescript-eslint/ban-types": [
            "error",
            {
                "extendDefaults": true,
                "types": {
                    "{}": false
                }
            }
        ]
    }
}

重新运行  pnpm run lint ，不报错了。

安装配置prettierrc

安装prettierrc

# 安装 prettier
pnpm install prettier -D

在根目录创建 .prettierrc.cjs 文件

module.exports = {
    stylelintIntegration: true,
    eslintIntegration: true,
    printWidth: 80, //单行长度
    tabWidth: 4, //缩进长度
    useTabs: false, //使用空格代替tab缩进
    semi: true, //句末使用分号
    singleQuote: true, //使用单引号
    endOfLine: 'auto'
};

 在package.json,添加命令

"scripts":{
    "format": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}"
}

解决 eslint 和 prettier 的冲突

安装 eslint-config-prettier eslint-plugin-prettier 依赖

pnpm install eslint-config-prettier eslint-plugin-prettier -D

然后在 .eslintrc.cjs 中 extends的最后添加一个配置:

"extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended" // 新增
],

配置保存（Ctrl + s）自动格式化代码

在项目中创建.vscode文件夹中创建 setting.json 文件

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  } // 默认格式化工具选择prettier
}