从esLint+Prettier开始格式化代码

简介: 从esLint+Prettier开始格式化代码

1. 促使我要代码格式化的原因

代码格式化和代码规范对研发者来说,都并不陌生。随手的保存,随手的格式化代码,总让我们的代码更加漂亮。但是我们在一次次的格式化中,偶尔也有一些问题。
在开发同一个项目时,由于不同的开发者使用的编辑器不同,格式化方案也有所不同,还有一些开发者带有之前开发习惯的格式化配置,那么在代码提交中,就会出现格式变动。完成一个功能后,开心的commit,却发现多了很多不是自己的修改,甚至引发冲突。当你使用--no-verify顺利提交之后,发现引号在单双之间横跳 、缩进在两个空格和tab不断反复。。。
所以,为了让团队内有一个统一的代码规范,不再因为这些无伤大雅的问题浪费时间,我选择使用esLint+Prettier来帮助我们来统一内部~~~

2. esLint

ESLint是一个JS代码检查工具,用于发现并修正语法错误和统一代码格式。也就是说 ESLint 关注两方面的问题:

  • 代码质量:约定JS的使用方式,避免问题的产生
  • 代码格式:只影响代码的美观程度,不会产生问题

为什么我们需要代码检查呢?JS 作为一种弱类型动态语言,写法会比较随心所欲,这便很容易引入问题并增加我们发现问题的成本。通过编写合适的规则来约束代码,利用代码校验工具来发现并修复问题,能让我们的代码更健壮,工程更可靠。ESLint 就是这么一个通过各种规则对我们的代码添加约束的工具。

3. Prettier

在使用 ESLint 的时候,我们往往会配合 Prettier 使用。Prettier 是一个‘有态度’的代码格式化工具,专注于代码格式自动调整,ESLint 本身就可以解决代码格式方面的问题,为什么要两者配合使用?

  • ESLint 推出 --fix 参数前,ESLint 并没有自动格式化代码的功能,而 Prettier 可以自动格式化代码。
  • 虽然 ESLint 也可以校验代码格式,但 Prettier 更擅长。

二者搭配使用,ESLint 关注代码质量,Prettier 关注代码格式。但是二者在格式化上面的功能有所交叉,所以Prettier 和 ESLint 一起使用的时候会有冲突,这需要我们进行一些配置:

  • 关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置
    ```javascript
    // .eslintrc

{

"extends": ["prettier"] // prettier 一定要是最后一个,才能确保覆盖    

}


- 当我们使用 Prettier + ESLint 的时候,其实格式问题两个都有参与,disable ESLint 之后,其实格式的问题已经全部由 prettier 接手了。那我们为什么还要这个 plugin?其实是因为我们期望报错的来源依旧是 ESLint ,使用这个,相当于**把 Prettier 推荐的格式问题的配置以 ESLint rules 的方式写入**,这样相当于可以统一代码问题的来源。
```javascript
// .eslintrc    

{         

    "rules": {        

        "prettier/prettier": "error"      

    }    

}

4. 开始配置

4.1 全局安装esLint

全局安装是为了方便所有项目,也可以在本项目安装

//全局安装
npm install eslint -g

//本项目安装
npm install eslint --save

4.2 全局安装prettier

全局安装是为了方便所有项目,建议本项目也安装

//全局安装
npm install prettier -g

//本项目安装
npm install prettier --save

4.3 配置eslint

在项目的根目录增加.eslintrc.js文件,进行eslint规则配置
.eslintrc.js

module.exports = {
   
   
  root: true,

  parserOptions: {
   
   
    //parser: 'babel-eslint', // 解析一些最新的 es 语法
    //sourceType: 'module' // 模块为 ECMAScript 模块
  },

  extends: ['prettier'], //standard:标准;prettier:使用prettier规则,放到最后,会覆盖eslint规则

  rules: {
   
   
    // 'no-debugger': 'error', // 禁止在代码中使用 debugger
    quotes: ['error', 'single'], // 单引号
    semi: ['error', 'always'] // 代码需要以分号结尾
  }
};

4.4 配置prettier规则

在项目的根目录增加.prettierrc.js文件,进行prettier规则配置,以下配置为本人测试使用,如需详细配置规则,请自己配置。
.prettierrc.js

module.exports = {
   
   
  printWidth: 800, // 单行宽度限制
  tabWidth: 2, // tab 使用两个空格
  useTabs: false, // 不使用制表符缩进,使用空格缩进
  semi: true, // 代码需要分号结尾
  singleQuote: true, // 单引号
  bracketSpacing: true, // 对象左右两侧需要空格
  jsxBracketSameLine: false, // html 关闭标签换行
  arrowParens: 'avoid', // 单参数的箭头函数参数不需要括号
  proseWrap: 'never', // 参考 https://prettier.io/docs/en/options.html#prose-wrap
  trailingComma: 'none', // 参考 https://prettier.io/docs/en/options.html#trailing-commas
};

部分prettier配置规则

{
   
   
  "formatOnSave":true,//保存时自动格式化
  "formatOnPaste":true,//粘贴时自动格式化
  "printWidth": 100, // 超过最大值换行
  "tabWidth": 4, // 缩进字节数
  "useTabs": false, // 缩进不使用tab,使用空格
  "semi": true, // 句尾添加分号
  "singleQuote": true, // 使用单引号代替双引号
  "trailingComma": none, //在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
  "proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
  "arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
  "bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
  "disableLanguages": ["vue"], // 不格式化vue文件,vue文件的格式化单独设置
  "endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "parser": "babylon", // 格式化的解析器,默认是babylon
  "requireConfig": false, // Require a 'prettierconfig' to format prettier
  "requirePragma": false, // 不需要写文件开头的 @prettier
  "useEditorConfig": false,
  "stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  "tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

Pretttier官方文档:https://prettier.io/docs/en/options.html

4.5 打开编辑器上的esLint和Prettier

由于在webstorm上,这两项不是自动启用的,而且在M1上,你是搜索不到prettier插件的的;可以根据下列方法,打开两个调试

4.5.1 webstorm

4.5.1.1 安装esLint和prettier插件

进入Preferences => Plugins =>Marketplace
搜索ESLint Restart Service Action,安装;这个就是在M1上的eslint;
搜索Perttier,安装;
image.png
image.png

4.5.1.2 打开esLint调试

进入Preferences => Languages & Frameworks => JavaScript => Code Quality Tools => ESLint

由于我是自己设置的格式化规则,所以这里我选择了Manual ESLint configuration模式
然后在最后选择了保存自动格式化
image.png

4.5.1.3 打开Prettier调试

进入Preferences => Languages & Frameworks => JavaScript => Prettier
选择要执行的文件Prettier package ,选择当前项目配置prettier
同样,我选择了保存自动格式化
image.png
以上webstorm完成配置;

4.5.2 vscode

4.5.2.1 安装插件

安装插件ESLint、Prettier - Code formatter
image.pngimage.png

4.5.2.2 设置eslint格式化快捷键

code => 首选项 => 键盘快捷方式,搜索 fix – 找到 ESLint 设置,双击按键绑定一栏,然后根据自己的编码习惯进行设置
image.png
image.png

4.5.2.3 设置prettier为格式化工具

设定编辑器默认代码格式化(美化)的插件为Prettier - Code formatter,
code => 首选项 =>设置
在搜索设置框贴入editor.defaultFormatter,将配置项选择为Prettier - Code formatter。
image.png

4.5.2.4 设置保存自动格式化

code => 首选项 =>设置
在搜索设置框贴入editor.formatOnSave,将配置项选择钩上;

到此,vscode配置完成。

5. 结语

以上,就完成了项目的格式化规则设置,当然,还可以设置ci或者git push代码时的检测,这里不再详细说明。
每个团队,想要不在代码格式冲突上产生矛盾,一套属于自己团队的代码规范十分有效!当然,还有其他的代码规范工具,那就仁者见仁,智者见智了,各位按需使用吧!

目录
相关文章
|
10月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
1900 4
|
11月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
1491 2
|
9月前
|
人工智能 自然语言处理 程序员
新版灵码AI程序员体验简评
通义灵码AI程序员是阿里云推出的智能开发工具,能够自主完成缺陷修复、需求实现和研发问答等任务。用户只需输入需求,AI程序员即可自动生成代码并提交合并请求。尽管目前仍处于内测阶段,存在一些问题,但其潜力巨大,有望大幅提升开发效率与质量,成为跨时代的产品。本文详细介绍了该工具的功能及实操体验,并对其未来发展提出了建议。
|
NoSQL MongoDB 数据安全/隐私保护
Docker 安装MongoDB 以及 相关配置文件、数据文件映射
本文是博主使用docker安装mongodb的方法记录,希望对大家有所帮助。
2187 0
|
编解码 小程序
微信小程序11177版本开启控制台方法
微信小程序11177版本开启控制台方法
|
6月前
|
编解码 人工智能 安全
快来试试这个开箱即用的万相2.1服务!!!
阿里云万相2.1系列提供高效灵活的视频生成解决方案,支持文生视频、图生视频等多模态任务。通过阿里云计算巢与ComfyUI推出的快速视频生成服务,用户可轻松制作微电影或短视频。针对长视频生成,提供了三种方法:使用高性能显卡、首尾帧拼接和补帧模型。此外,还内置工作流实现文生图和图生图功能,简单易用。部署说明及使用流程详细列出,方便开发者快速上手。访问计算巢了解更多有趣服务。
|
10月前
|
人工智能 小程序 算法
微信小程序地图定位的核心技术与实际应用详解
在移动互联网时代,微信小程序凭借其轻量化和普及性,成为室内地图导航的理想平台。本文探讨了微信小程序在室内定位领域的创新应用,包括蓝牙iBeacon定位、高精度地图构建及AI路径规划等核心技术,及其在购物中心、医院、机场火车站和景区等场景的应用,展示了其为用户带来的高效、智能的导航体验。
464 0
|
11月前
|
小程序 UED 开发者
小程序的生命周期函数
小程序的生命周期函数
415 1
|
12月前
|
缓存 前端开发 JavaScript
在react项目中实现按钮权限createContext && useContext
文章介绍了在React项目中如何使用`createContext`和`useContext`来实现按钮级别的权限控制。
185 0
|
Java 数据库连接 mybatis
Mybatis mapper动态代理解决方案
该文介绍了Mybatis中使用Mapper接口的方式代替XML配置执行SQL。Mapper接口规范包括:namespace与接口类路径相同,select ID与接口方法名一致,parameterType和方法参数类型匹配,resultType与返回值类型一致。实现过程中,需配置Mapper.xml,编写Mapper.java接口,并在Mybatis-config.xml中设置。测试类中,通过SqlSession的getMapper方法获取接口的动态代理对象,调用方法执行SQL。
559 0

热门文章

最新文章