vue3中加入eslint和prettier
通过 vite 创建的 vue3 项目默认并没有像 vue-cli 一样可以选择加入eslint和prettier，需要自己手动加入，这里记录一下在项目配置eslint和prettier 的过程
1. 先使用vite初始化项目
使用 NPM:
$ npm init vite@latest复制代码
使用 Yarn:
$ yarn create vite复制代码
选择vue 作为 framework
选择 vue-ts
2. 安装 eslint
除了安装eslint之外我们还要安装一些常用的 eslint plugin
npm i eslint -D npm i eslint-config-standard -D npm i eslint-plugin-import -D npm i eslint-plugin-node -D npm i eslint-plugin-promise -D npm i eslint-plugin-vue -D npm i @typescript-eslint/eslint-plugin -D npm i @typescript-eslint/parser -D npm i eslint-define-config -D复制代码
eslint-config-standard
eslint-plugin-import
eslint-plugin-node
eslint-plugin-promise
eslint-plugin-vue
typescript-eslint
3. 配置 eslint
在项目根目录创建 .eslintrc.js
// .eslintrc.js
// eslint-define-config可以帮助我们做语法提示
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
// ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
root: true,
// 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
env: {
browser: true,
es2021: true,
},
// 启用的规则
extends: [
'plugin:vue/vue3-recommended',
'standard',
],
parserOptions: {
// js的版本
ecmaVersion: 13,
// 解析器
parser: '@typescript-eslint/parser',
// 模块化方案
sourceType: 'module',
},
// 引用的插件 下载的插件去掉eslint-plugin-前缀引入
plugins: ['vue', '@typescript-eslint', 'import', 'node', 'promise'],
// 自定义规则
rules: {},
})复制代码同时可以创建 .eslintignore 来配置eslint需要忽略哪些文件或者文件夹
node_modules .vscode .idea dist /public .eslintrc.js复制代码
4. 安装 prettier
npm i prettier -D复制代码
5. 配置 prettier
在项目根目录创建 .prettierrc.js
module.exports = {
// 超过80就换行
printWidth: 80,
// 不适用分号
semi: false,
// 使用单引号
singleQuote: true,
// 对象的最后一项加逗号
trailingComma: 'all',
}复制代码更多配置项
同时可以创建 .prettierignore 来配置prettire需要忽略哪些文件或者文件夹
大部分情况下 .prettierignore 和 .eslintignore 配置一样
6. 解决 eslint 和 prettier 的兼容问题
npm i eslint-config-prettier -D npm i eslint-plugin-prettier -D复制代码
eslint-config-prettier
eslint-plugin-prettier
配置 .eslintrc.js
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
...
extends: [
'plugin:vue/vue3-recommended',
'standard',
+ 'prettier',
+ 'plugin:prettier/recommended',
],
...
})复制代码7. 解决vue3 defineProps' is not defined.
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
root: true,
env: {
browser: true,
es2021: true,
},
+ globals: {
+ defineProps: 'readonly',
+ defineEmits: 'readonly',
+ defineExpose: 'readonly',
+ withDefaults: 'readonly',
+ },
extends: [
'plugin:vue/vue3-recommended',
'standard',
'prettier',
'plugin:prettier/recommended',
],
...
})
作者：奇犽z
链接：https://juejin.cn/post/7021464780242321439