Vue3项目添加 ESLint 和 Prettier

OceanZH广东
English

Vue3 + TS 项目中增加 ESLint 和 Prettier

背景

eslint 用于校验代码语法规范,保证项目质量;
prettier 用于保证项目代码的格式与风格;

Vue3 项目初始化

参考 搭建 Vite 项目


# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线:
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

ESLint

安装

npm add eslint -D

初始化

npx eslint --init

初始化过程中的交互选项:

(1) How would you like to use ESLint?
选择:To check syntax and find problems

(2) What type of modules does your project use?
选择:JavaScript modules (import/export)

(3) Which framework does your project use?
选择:Vue.js

(4) Does your project use TypeScript?
选择:Yes

(5) Where does your code run?
选择:Browser

(6) What format do you want your config file to be in?
选择:JavaScript

(7) Would you like to install them now?
选择:Yes

(8) Which package manager do you want to use?
选择:pnpm / npm / yarn

按照这样选择会自动安装识别 vue 和 ts 文件所需的插件

初始化完成后会在项目根目录生成配置文件 .eslintrc.js

.eslintrc.js 配置

改写配置如下

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint", "prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "@typescript-eslint/ban-types": "warn",
    "@typescript-eslint/no-explicit-any": "off",
    "vue/no-unused-vars": "warn",
    "vue/multi-word-component-names": "warn",
  },
};

script 配置

pakcage.json 中新增 script 如下

  "scripts": {
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
  }
eslint . 为指定lint当前项目中的文件
--ext 为指定lint哪些后缀的文件
--fix 开启自动修复

执行脚本即可使用 eslint 进行全局检查和修复

npm run lint

安装 VSCode 插件 ESLint

实现每次保存代码时,自动执行lint命令来修复代码的错误。

在项目中新建.vscode/settings.json文件,然后在其中加入以下配置。

{
    // 开启自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }
}

Prettier

安装

npm install prettier -D

配置

在根目录下新建.prettierrc.js

module.exports = {
  // 一行的字符数,如果超过会进行换行,默认为 80
  printWidth: 100,
  // 一个缩进使用几个空格数
  tabWidth: 2,
  // 是否使用 tab 进行缩进,默认为 false,表示用空格进行缩减
  useTabs: false,
  // 是否在句尾使用分号
  semi: true,
  // 字符串是否强制使用单引号,默认为 false,使用双引号
  singleQuote: false,
  // 是否使用尾逗号,有三个可选值"<none|es5|all>"
  trailingComma: "es5",
  // 对象大括号直接是否有空格,默认为 true,效果:{ foo: bar }
  bracketSpacing: true,
  // 处理换行符 lf,crlf,cr,auto
  endOfLine: "auto",
  // Object 对象中的引号处理方式
  quoteProps: "consistent",
};

详细配置见 官方文档

script 配置

pakcage.json 中新增 script 如下

  "scripts": {
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
  }

安装 VSCode 插件 Prettier - Code formatter

安装该插件以实现在保存的时候自动完成格式化

.vscode/settings.json 中添加一下规则

{
    // 保存的时候自动格式化
    "editor.formatOnSave": true,
    // 默认格式化工具选择prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

TODO:

ESLint 和 Prettier 的冲突问题

参考

阅读 852

前端开发

286 声望
12 粉丝
0 条评论

前端开发

286 声望
12 粉丝
宣传栏