eslint 保存自动格式化_ESLint + Prettier 规范前端代码

ESLint + Prettier 规范前端代码

点击上方“技术支持联盟”，选择“置顶公众号”

第一时间了解程序员大小事儿

作者: 百香果，一个坚持认为Coding能改变世界的程序猿，喜欢分享，望互相学习指正，博客地址：www.devmajun.com

摘要:使用ESlint配合Prettier检测出前端代码中潜在问题，提高代码质量，统一代码风格，检测不符合规范的代码，提示及修复。

01

解决问题

多人合作开发，代码风格不一致，js开发写法众多，没有官方推荐的代码规范，使用ESlint配合Prettier检测出代码中潜在问题，提高代码质量，统一代码风格，检测不符合规范的代码，提示及修复。

02

eslint

ESLint 是一个开源的 JavaScript 代码检查工具，它是用来进行代码的校验，检测代码中潜在的问题，比如某个变量定义了未使用、函数定义的参数重复、变量名没有按规范命名等等。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。(重点，使用eslint必须有package.json文件)

03

Prettier

它是代码格式化工具，用来做代码格式化，有了Prettier之后，它能去掉原始的代码风格，确保团队的代码使用统一相同的格式，修复规则可自定义。

04

建议

ESLint的机制是首先在项目中去找是否有.eslinntrc.js文件，如果没找到，会去当前目录中去找还是没有的话，会去全局找，个人爱好把ESlint装到根目录下，这样在这个目录中创建项目都会去使用eslint这套规范。

首先在项目文件夹中引入以下文件

文件功能配置

1、.eslintrc.js //定义自定义规则 在rules中

2、prettier.config.js // 编辑代码结束后，点击保存会自动修复代码中的规范 比如：缩进、分号、引号等等

3、.eslintignore // 忽略文件夹不检测eslint规范

4、重点:package.json // 安装插件 eslint 等等

5、.editorconfig // 这个文件夹会去查看.md文件夹中的规范

操作讲解

1、第一步：输入下面指令

2、建立一个文件夹名为project跟package.json中设置的相同,在这个文件夹中去编写代码

3、在文件夹中创建一个index.js 如下

4、去执行 npm run lint 指令 //去查看文件夹中有哪些不符合规范的

如图所示 一共14处错误，仅10行的代码，其中都是缩进、空格的问题。为了提高编码速度，有了下面的指令

5、去执行 npm run lint-fix 指令 //去查看文件夹中有哪些不符合规范的并修复

如图所示 就一处警告，提示我们不能使用console.log，回过头看我们刚刚写的文件

如图所示，报错消失、警告消失，代码也规范起来了，这就是eslint+prettier的作用

下面给大家讲解VS code编辑器 与 WebStorm编辑器如何使用

VS code

1、在应用商城中搜索eslint 与 prettier

2、在设置中查找settings.json 并设置

二、WebStorm

1、webstorm必须下载最新版本，最新版本自带eslint 打开settings搜索eslint。如图所示。设置好它，快去使用吧。

历史文章

解决方案：

API接口安全优化浅谈

基于idea将传统应用maven化改造实践

安全漏洞预扫小工具

Nacos作为注册中心，配置中心部署方案

Rancher+K8S简化学习环境搭建方案

Excel大数据量解析优化方案

Sharding-JDBC个性化分表方案

基于JWT的接口权限认证

Spring Cloud Gateway实现限流

公网发布的通用技术解决方案

Nginx结合Lua实现限流

Mysql数据同步Canal方案

Weblogic部署基于Spring Cloud项目应用实例

智能验证码解析java语言实现

数据库的演绎与变迁-下架最后一台小型机

关于struts架构通过引入spring包实现dubbo调用
测试的未来式

监控&运维

redis监控工具-redislive

微服务链路追踪工具 Apache  SkyWalking部署与实践

快速发现生产环境SQL问题

Grafana-业务数据监控实践

自动化运维能力提升

服务器监控及问题定位排除

基于Spring Boot Admin告警之应用状态告警

Ansible在自动化运维中的使用

大数据

基于CDH集群的大数据项目的优化总结

Oracle实时同步大数据平台解决方案

实时流关联维表解决方案

中间件

浅谈Elasticsearch的资源分配

Apache Kafka使用规范
Elasticsearch安装及使用

SSDB介绍及使用

RabbitMq使用简单介绍

Spring Cloud常用组件介绍

前端

Vue.js对WinXP系统对兼容性

关于采集操作系统、浏览器版本的设计方案及一些浏览器兼容性问题处理

安卓动态加载SO文件

对浏览器的理解及兼容移动端H5本地化方案调研和实践

自适应网页设计

短信/浏览器唤起APP方案

基础知识

Sonar简介

JVM基础系列1：JVM内存模型介绍

JVM基础系列2：JVM配置参数和Java内存模型

JVM基础系列3  虚拟机字节码执行引擎

开发规范

Java异常处理规范

战略方向

金融保险系统开源浪潮下机遇与挑战

项目实战

客户为中心，统筹协调，把控风险

END