Web 项目编码规范化工具

2019-06-24 admin

工具

The pluggable linting utility for JavaScript and JSX

代码校验工具(linting utility),让代码更一致和避免 bug。

Prettier is an opinionated code formatter.

支持 JavaScript · TypeScript · Flow · JSX · JSON · CSS · SCSS · Less · HTML · Vue · Angular ·GraphQL · Markdown · YAML 等文件的格式化。

代码格式化工具(code formatter),少数服从多数,任性的风格统一,来确保所有输出的代码符合一致。

集成

编辑器与终端集成,以便开发时代码不规范及语法错误时,编辑器与终端都将信息暴露给用户,以方便查看与及时解决问题。

项目集成

代码格式化过程

  • 终端下发出格式化命令 ☟
  • ESLint 收到命令 ☟
  • ESLint 读取项目目录下的 ESLint 配置文件 ☟
  • 如果配置文件里面有 Prettier ☟ 插件则读取项目目录下的Prettier配置文件,反之则跳过该步骤 ☟
  • ESLint 发出格式化命令 ↺

Prettier 配置

  1. 安装 prettier 包。
  2. 项目根目录下添加配置.prettierrc文件。

ESLint 配置

  1. 安装 eslint 包。
  2. 安装项目特定语法校验规则eslint扩展插件,如Vue项目eslint-plugin-vue,React项目eslint-plugin-react、eslint-plugin-react-hooks 等
  3. 安装 eslint-plugin-prettier 集成 prettier 语法规则,安装 eslint-config-prettier 解决 prettier 与其他规则等冲突问题。
  4. 项目根目录下添加配置.eslintrc文件。
  5. 将上述等插件及扩展规则添加到配置文件,才会生效。在配置文件到rules项可对单条规则一一进行改写。

项目完整配置参考

编辑器集成

安装插件

以 VSCode 为例,其他编辑器类似。

如果项目是 Vue 工程,再安装一个插件 Vetur : 为 Vue 框架提供语法高亮、代码片段、Emmet、格式化、代码风格检查、智能提示、调试帮助等。vetur 文档

配置

可参考这篇文章或网上有很多配置教程可查阅,此处不在重复诉述。保证插件格式化与脚本格式化命令结果一致即可。

代码格式化

格式化单文件

当某个文件当代码不规范时,可用编辑器安装当插件进行格式化代码。

配置使用 Prettie 插件格式化文件,保证插件格式化与以下脚本格式化命令结果一致。

格式项目下文件

当想校验工程目录下当所有代码时,可填配脚本格式化命令,例如提交代码之前添加Hooks校验代码。

填配脚本格式化命令,使用 ESLint 校验代码并格式化不规范代码。以下以 React 项目需校验文件为例:

"scripts": {
    "lint": "eslint --ext tsx,ts,js,jsx src",
    "lint-fix": "eslint --fix --ext tsx,ts,js,jsx src",
  },

参考链接

[转载]原文链接:https://segmentfault.com/a/1190000019568913

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-68084.html

文章标题:Web 项目编码规范化工具

相关文章
JavaScript开发工具
常用的有sublime,webstorm,notepad++等 ...
2015-11-12
JavaScript将字符串转换成字符编码列表的方法
本文实例讲述了JavaScript将字符串转换成字符编码列表的方法。分享给大家供大家参考。具体如下: JavaScript将字符串转换成字符编码列表,例如foo转换成 [112,111,111] 方法 1: JavaScript 1.6 A...
2017-03-21
响应式Web设计的9项基本原则
响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经...
2015-11-12
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
2015年Web:追求原有“框架”外的新功能
Web目前正在经历一场巨大的变化,ServiceWorkers、传感器访问、推送通知等方式将打破Web原有的框架。而在2015年我们可以利用这几种方式快速的改变自己的网站。在不断增多的Web功能中寻求最合适自己的功能。 Web最初的设想是一...
2015-11-12
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2016-01-13
五款超实用的开源SVG工具
本文我们将分享5款超实用的开源的SVG工具:   1. SharpVectorGraphics (SVG)   SVG是基于Microsoft .Net开源项目设计而来,是建立在.Net framework上使用SVG的一款应用,支持生成、...
2016-01-13
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
15个提高编程技巧的JavaScript工具
JavaScript鑴氭湰搴撴槸涓€涓�棰勫厛鐢↗avaScript璇�瑷€鍐欏ソ鐨勫簱锛屽畠鏂逛究浜嗘垜浠�寮€鍙戝熀浜嶫avaScript鐨勫簲鐢ㄧ▼搴忥紝鐗瑰埆閫傚悎AJAX鍜屽叾浠栦竴浜涗互Web涓轰腑蹇冪殑鎶€鏈�銆侸avaScr...
2015-11-12
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
回到顶部