vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint(2)

build: {
outDir: path.resolve(__dirname, ‘…/dist’)
}
})

##### 第四步安装 eslint-parser （ESLint解析器）

pnpm add @babel/core -D // 某些代码需要调用 Babel 的 API 进行转码，就要使用@babel/core模块。
pnpm add @babel/eslint-parser@latest -D

##### 第五步 安装prettier (用于规范代码格式)

pnpm add prettier -D
pnpm add prettier-eslint -D
pnpm add eslint-config-prettier -D // eslint兼容的插件
pnpm add eslint-plugin-prettier -D // eslint的prettier

##### 第六步配置prettier


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

// 以下配置视自己情况而定
module.exports = {
tabWidth: 2, // 使用2个空格缩进
useTabs: false, // 不使用制表缩进,而使用空格
semi: false, // 代码结尾是否加分号
trailingComma: ‘none’, // 代码末尾不需要逗号 参考 https://prettier.io/docs/en/options.html#prose-wrap
singleQuote: true, // 是否使用单引号
printWidth: 120, // 超过多少字符强制换行
arrowParens: ‘avoid’, // 单个参数的箭头函数不加括号 arg => arg
bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }
endOfLine: ‘auto’, // 文件换行格式 LF/CRLF
quoteProps: ‘as-needed’, // 对象的key仅在必要时用引号
jsxSingleQuote: false, // jsx不使用单引号,而使用双引号
jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
rangeEnd: Infinity, // 结尾
requirePragma: false, // 不需要写文件开头的 @prettier
insertPragma: false, // 不需要自动在文件开头插入 @prettier
proseWrap: ‘preserve’, // 使用默认的折行标准 参考 https://prettier.io/docs/en/options.html#trailing-commas
htmlWhitespaceSensitivity: ‘css’ // 根据显示样式决定html要不要折行
}

##### 第七步配置配置 .eslintrc.cjs

// 在rules里面简单的一些配置：
// “off” 或 0 - 关闭规则
// “warn” 或 1 - 开启规则，使用警告级别的错误
// “error” 或 2 - 开启规则，使用错误级别的错误
module.exports = {
“env”: {
“browser”: true,
“es2021”: true,
“node”: true
},
“extends”: [
“eslint:recommended”, // 使用推荐的eslint
‘plugin:vue/vue3-recommended’, // 使用插件支持vue3
// 接入 prettier 的规则
‘plugin:prettier/recommended’,
‘eslint-config-prettier’
],
“parserOptions”: {
“ecmaVersion”: 13,
“sourceType”: “module”,
“ecmaFeatures”: {
“modules”: true,
‘jsx’: true
},
“requireConfigFile”: false,
“parser”: ‘@babel/eslint-parser’
},
// eslint-plugin-vue
‘plugins’: [
‘vue’, // 引入vue的插件 vue <> eslint-plugin-vue
‘prettier’ // 引入规范插件 prettier <> eslint-plugin-prettier
],
‘globals’: {
defineProps: ‘readonly’,
defineEmits: ‘readonly’,
defineExpose: ‘readonly’,
withDefaults: ‘readonly’
},
// 这里时配置规则的,自己看情况配置
// 这里可以进行自定义规则配置
// key：规则代号
// value：具体的限定方式
// “off” or 0 - 关闭规则
// “warn” or 1 - 将规则视为一个警告（不会影响退出码）,只警告，不会退出程序
// “error” or 2 - 将规则视为一个错误 (退出码为1)ÿ