eslint+prettier统一前端代码风格、代码规范、开发工具相关配置教程

eslint+prettier配合使用对于追求代码洁癖,统一前端风格简直就是一劳永逸,能大幅度提升敲代码的幸福感

一、老工程使用prettier依赖包

如果工程是老工程,比如vue2的,没有开启eslint,那么只需要在根路径下添加.prettierrc文件,安装prettier插件,添加prettier执行指令就行。

这样可以批量格式化代码,也可以 结合vscode配置格式化插件,具体配置见最后

1、安装prettier

npm i prettier -D

2、根目录下创建.prettierrc文件,代码如下:

{
  "printWidth": 1000,
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto",
  "trailingComma": "none"
}

3、在package.json中添加指令

"scripts": {
    "format": "prettier --write \"src/**/*.{js,vue,less,sass}\""
  }

4、进入项目根目录后,执行npm run format指令就可以整体格式化代码风格。

二、新项目:eslint与prettier组合

eslint负责检测代码规范prettier 负责格式化代码统一风格。

如果是用vue脚手架,默认配置了eslint,就无需再安装eslint相关插件,可能需要升级版本。

1、安装eslint与perttier相关插件(工程存在eslint也可执行安装下面统一插件):

npm i eslint babel-eslint eslint-config-standard eslint-friendly-formatter eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue prettier prettier-eslint eslint-config-prettier -D

单独安装eslint-loader(eslint-loader版本必须在3.0.0以上):

npm i eslint-loader -D

如果不升级,一般会出现错误:Module build failed: Error: Cannot find module ‘eslint/lib/formatters/stylish’

单独安装eslint-plugin-prettier(eslint-plugin-prettier版本号建议 < 4)

npm i eslint-plugin-prettier@3.1.4 -D

prettier相关插件说明

  • eslint-plugin-prettier:为了eslint跟prettier可以联合使用
  • eslint-config-prettier:eslint跟prettier兼容,关闭prettier跟eslint 冲突的rules

2、创建.prettierrc文件

根目录下创建.prettierrc文件,代码如下:

{
  "printWidth": 1000,
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto",
  "trailingComma": "none"
}

3、调整.eslintrc.js配置

示例代码:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: ["vue", "prettier"],
  extends: ["plugin:vue/essential", "eslint:recommended", "prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
        trailingComma: "none"
      }
    ]
  }
};

核心代码:

 plugins: ["prettier"],
 extends: ["prettier"],
 rules: {
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
        trailingComma: "none"
      }
    ]
  }

说明:

  • eslint:all:表示引入当前版本eslint的所有核心规则。
  • eslint:recommended:表示引入eslint的核心功能,并且报告一些常见的共同错误。

4、添加指令、执行指令

package.json中添加如下指令:

"scripts": {
    "format": "prettier --write \"src/**/*.{js,vue,less,sass}\"",
    "lint2": "eslint --fix \"src/**/*.{js,vue,less,sass}\""
  }

进入工程,执行npm run format可以格式化代码风格。执行npm run lint2检查前端语法,只能修复部分问题,不能修复的需要手动修改。

三、统一开发工具:vscode(推荐)

统一安装vscode扩展:eslintPrettier - Code formatter

eslint+prettier

安装后,打开设置,切换到setting.json进行配置。

{
"editor.formatOnSave": true,
//"eslint.autoFixOnSave": true, //这个已经废弃,改用下面的
"editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
 },
"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

注意,重点配置保存文件自动格式化:

{
  "editor.formatOnSave": true
}

至此,当你在vscode中写代码,保存时,就会自动格式化代码。

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 2,618
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top