还在手动调整检查代码格式？？手把手教你eslint+prettier自动验证代码风格、保存格式化代码

阿银
924 阅读3分钟

这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战

之前也用到过，但是没有搞懂过，就在此时写这篇文章的我也是懵懵懂懂，文章也许有比较多的纰漏，欢迎有使用经验的大佬们指点一下✍

前言

正式安装前，先介绍下我项目的环境：vue2.5.2 + webpack3.6.0（如果你是 react项目的话需要安装其它包噢，我没有去探索这个）

使用eslint和prettier配合格式化，它们都需要vscode安装扩展，项目内也需要安装对应的包才能生效

vscode 安装扩展

这两个是必备的！

image-20210830193922031.png

image-20210830193952868.png

项目内安装对应的prettier和eslint包

安装包

{
    "devDependencies": {
        "prettier": "^2.3.2",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-loader": "2.1.1",
        "eslint-plugin-prettier": "^3.4.1",
        "eslint-plugin-vue": "^7.17.0"
    }
}

 npm install --save-dev prettier eslint eslint-loader eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier

生成eslint配置文件

.\node_modules\.bin\eslint --init

按照提示一步一步选择下去，我选的是json文件配置，完成选项后，会帮你生成一个文件.eslintrc.json，会按照你选的选项进行初始化配置。

  • image-20210830195738827.png
  • image-20210830195811261.png
  • image-20210830195838652.png
  • image-20210830195859253.png
  • image-20210830195918082.png
  • image-20210830195938821.png
  • image-20210830200023422.png

这是生成的初始配置文件

/.eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

配置.eslintrc.json规则文件

因为我要配合prettier做格式化，所以需要把eslint配置文件需要做一些调整

/.eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:vue/essential",
        // "plugin:prettier/recommended" 的意思: 启用eslint-plugin-prettier和eslint-config-prettier，使编辑器显示错误提示，确保这项是扩展数组中的最后一个配置
        // eslint-plugin-prettier 使用prettier做为eslint的检测规则
        // eslint-config-prettier 关闭所有不必要或者可能和prettier冲突的rule
        "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "sourceType": "module", // 允许使用import导入
        "ecmaVersion": 12
    },
    "plugins": ["vue"],
    "rules": {
        // 自定义规则，有些规则prettier也没有，需要在这里进行补充
        "prettier/prettier": "error",
        "no-ternary": "off",
        "no-unused-vars": "error"   // 禁止申明未使用的变量，这个一般都需要，但是prettier没有这个，需要在这单独写
    }
}

相关rules传送门：eslint中文文档（tips：如果开发中遇到什么不想要的报错可以根据报错信息，找对应的rule并把其关闭即可）

配置.eslintignore忽略列表文件

有很多文件夹其实不需要进行eslint检测的，比如node_modules、dist文件等。.eslintignore的语法和.gitignore一样，可以参考这篇文章：传送门

/.eslintignore
​
/node_modules/
/.vscode/
/static_dist/
/static_init/
​
/static_dev/*
!/static_dev/noh_app/script/plugin2x/saxmodule/intelligentCockpit/

配置.prettierrc.json格式化风格文件

主要配置一些常见的配置，如下：

/.prettierrc.json
{
    "tabWidth": 4,
    "printWidth": 160,
    "useTabs": false,
    "endOfLine": "auto",
    "singleQuote": false,
    "semi": true,
    "trailingComma": "none",
    "bracketSpacing": true
}

配置vscode settings文件

{
    // eslint配置项，保存时自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 默认使用prettier格式化支持的文件
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // 自动设定eslint工作区
    "eslint.workingDirectories": [
        { "mode": "auto" }
    ],
    // 保存格式化
    "editor.formatOnSave": true
}

效果

配置完上面的，然后记得把vscode器重启下，应该没太大问题，我刚刚也在测试项目上走了一遍。

下面是我的一个使用效果，使用ctrl + s保存即可修复eslint报错。

eslint效果.gif

image-20210830202832738.png 哇咔咔，舒服的雅痞，再也不用担心代码风格不统一了

小结

我理解 eslint+prettier 这对组合使用的主要思想是：把检测、格式化的工作交给prettier，以prettier的规则为检测规则，eslint只负责展示报错信息，所以rules这块使用"prettier/prettier": "error"即可展示prettier的报错展示信息，但有的规则prettier也没有啊对不对，比如禁止申明未使用的变量，这时我要用eslint的规则，只需要在后面添加即可。当然只配置这些也还是不够的，也需要配置eslint自动修复、保存格式化、默认格式化为prettier才能一起完成。也许我理解的也不对，欢迎指正。

avatar
文章
阅读
粉丝