eslint+prettier统一代码风格的实现方法
(编辑：jimmy 日期: 2024/12/27 浏览：2)
1.实现效果
Eslint校验代码语法，prettier统一格式化代码，按下保存自动修复eslint错误，自动格式化代码。
2.安装vscode插件
- Vetur
- ESLint
- Prettier - Code formatter
3.配置vscode设置
文件–首选项–设置，打开json模式，添加以下配置：
{
// 控制工作台中活动栏的可见性。
"workbench.activityBar.visible": true,
//主题设置
"workbench.colorTheme": "Monokai",
// 默认编辑器字号
"editor.fontSize": 14,
//是否自动换行
"editor.wordWrap": "on",
"workbench.editor.enablePreview": false, //打开文件不覆盖
"search.followSymlinks": false, //关闭rg.exe进程
"editor.minimap.enabled": false, //关闭迷你图快速预览
"files.autoSave": "onWindowChange", // 切换窗口时自动保存。
"editor.lineNumbers": "on", //开启行数提示
"editor.quickSuggestions": {
//开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"editor.tabSize": 2, //制表符符号eslint
//.vue文件template格式化支持，并使用js-beautify-html插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
//js-beautify-html格式化配置，属性强制换行
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},
//根据文件后缀名定义vue文件类型
"files.associations": {
"*.vue": "vue"
},
//配置 ESLint 检查的文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
//保存时eslint自动修复错误
"eslint.autoFixOnSave": true,
//保存自动格式化
"editor.formatOnSave": true
}
4.配置.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended'],
rules: {
'no-console': process.env.NODE_ENV === 'production' "color: #ff0000">5.配置.prettierrc
{
"eslintIntegration": true,
"singleQuote": true,
"semi": false
}