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执行命令
-
eslint .为指定lint当前项目中的文件 -
--ext为指定lint哪些后缀的文件 -
--fix开启自动修复
"scripts": {
...
"lint": "eslint . --ext .vue,.js --fix"
},
-
运行 eslint 并查看它是否有效
npm run lint
-
常见问题
-
组件名未定义报错 -
参数未使用报错
我们可以在.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
-
常见问题
-
ESLint@8.23: TypeError: this.libOptions.parse is not a function我们只要将eslint版本降低就行了
npm install eslint@8.22.0 --save-exact
-
在vue3中，配置文件 prettierrc.cjs最好用.cjs后缀。
原文始发于微信公众号（大前端编程教学）：vue3+vite配置Eslint和Prettier
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/224237.html
