eslint+prettier+vue3格式化
为了在使用ESLint、Prettier和Vue 3时格式化代码,你需要做以下几步:
- 安装必要的包:
npm install --save-dev eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier prettier
- 在项目根目录下创建
.eslintrc.js
或.eslintrc.json
配置文件,并添加以下内容:
module.exports = {
extends: [
// 添加 eslint-config-prettier 使 ESLint 规则与 Prettier 规则协同工作
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:prettier/recommended'
],
rules: {
// 在这里添加或覆盖 ESLint 和 Prettier 规则
}
};
- 创建
.prettierrc
配置文件(或者使用.prettierrc.json
、.prettierrc.yaml
、.prettierrc.js
等),并添加Prettier规则:
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
"endOfLine": "auto"
}
- 在
package.json
中添加ESLint和Prettier的脚本:
{
"scripts": {
"lint": "eslint --ext .js,.vue src",
"format": "prettier --write \"src/**/*.{js,vue}\""
}
}
- 运行脚本检查和格式化代码:
npm run lint
npm run format
确保你的编辑器或IDE支持使用ESLint和Prettier插件,这样在开发过程中可以实时检测代码质量并自动格式化。
评论已关闭