Vue3+vite 配置Eslint和Prettier

Eslint和Prettier

为了我们项目代码规范化，我们引入Eslint和Prettier。

eslint

安装eslint

npm install eslint -D
//或者
yarn add -D eslint

初始化配置eslint

npx eslint --init

• 选择模式

You can also run this command directly using 'npm init @eslint/config'.
? 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

• 选择语言

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

• 选择框架Vue.js

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
? Which framework does your project use? … 
  React
❯ Vue.js

• 我们用的是js，所以选No

✔ Does your project use TypeScript? · No / Yes

• 两者都选择

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

• 配置文件格式，选JavaScript

? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

• 安装Yes

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

• 安装完成后根目录生成.eslintrc.cjs文件

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

• 在 package.json 的脚本中指定 eslint 执行命令

1. eslint . 为指定lint当前项目中的文件
2. --ext 为指定lint哪些后缀的文件
3. --fix 开启自动修复

"scripts": {
    ...
   "lint": "eslint . --ext .vue,.js --fix"
  },

• 运行 eslint 并查看它是否有效

npm run lint

• 常见问题

1. 组件名未定义报错
2. 参数未使用报错

我们可以在.eslintrc.cjs添加一下规则，关闭检测

"rules": {
    "vue/multi-word-component-names": "off",
    "no-unused-vars": "off"
}

Prettier

Prettier用于规范代码格式,不需要可以不装。

安装Prettier

npm install prettier -D

配置

在根目录下创建.prettierrc.cjs配置文件

module.exports = {
    tabWidth: 2,               // 使用2个空格缩进
    semi: false,               // 代码结尾是否加分号
    singleQuote: true,         // 是否使用单引号
    printWidth: 100,           // 超过多少字符强制换行
    bracketSpacing: true,      // 对象大括号内两边是否加空格 { a:0 }
    endOfLine: 'auto',         // 文件换行格式 LF/CRLF
    useTabs: false,            // 不使用缩进符,而使用空格
    quoteProps: 'as-needed',   // 对象的key仅在必要时用引号
    rangeStart: 0,             // 每个文件格式化的范围是文件的全部内容
    rangeEnd: Infinity,        // 结尾
    proseWrap: 'preserve',     // 使用默认的折行标准
    htmlWhitespaceSensitivity: 'css'  // 根据显示样式决定html要不要折行
}

• 在 package.json 的脚本中指定 prettier 执行命令

"scripts": {
    "lint": "eslint . --ext .vue,.js --fix",
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    "fix": "npm run format && npm run lint"
  },

• 执行检查修改

npm run fix

• 常见问题

1. ESLint@8.23: TypeError: this.libOptions.parse is not a function我们只要将eslint版本降低就行了

npm install eslint@8.22.0 --save-exact

2. 在vue3中，配置文件prettierrc.cjs最好用.cjs后缀。