• 首页
  • 关于
    • 前端行知录 photo

      前端行知录

      前端路漫漫,行知方知行

    • Email
    • Github
  • 文章
    • 所有文章
    • 所有标签
  • 作品

JavaScript 编码规范

19 May 2016

Reading time ~1 minute

编码规范

在团队协作过程中,编码规范的作用想必不用多说,本文主要介绍如何选择及相应的辅助工具,最大程度上保证代码质量。

选择标准

  • 认可度高,该规范现在已经或者即将成为国际 JavaScript 标准了
  • 支持项目的技术选型
  • 是否提供插件支持

参考以上几条标准, airbnb 团队在 GitHub 维护的 airbnb/javascript 瞬间脱颖而出。

  • 目前 GitHub 上最有热度的规范,有恐怖的 35000+ 个 star
  • 支持 ES6、React 等
  • 官方提供 ESlint、JSCS 插件支持

规则配置

airbnb 团队在分享编码风格的同时,还提供了与之对应的 eslint 配置文件。他们提供的配置文件,根据使用环境不同,分三种:

1、 eslint-config-airbnb

支持EcmaScript 6+和React

  • npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint
  • add "extends": "airbnb" to your .eslintrc

2、 eslint-config-airbnb-base

支持ECMAScript 6+

  • npm install --save-dev eslint-config-airbnb-base eslint-plugin-import eslint
  • add "extends": "airbnb-base" to your .eslintrc

3、 eslint-config-airbnb-base/legacy

支持ES5

  • npm install --save-dev eslint-config-airbnb-base eslint-plugin-import eslint
  • add "extends": "airbnb-base/legacy"to your .eslintrc

Eslint Parser

如果程序中还有ES5的写法,建议使用 ‘babel-eslint’ 作为 eslint 的 parser,只要在 .eslintrc 中加入如下代码即可。

"parser": "babel-eslint"

可视化提示

借助 airbnb 提供的 ESlint 插件, 如果使用 Atom 进行开发,可以利用 linter 和 linter-eslint 插件进行可视化错误提示。

代码自动格式化

我们希望有一个自动工具能帮我们把代码进行自动格式成符合我们代码规范的代码。我们使用的是 esformatter,它同样有 Atom 的插件工具。这个插件可以让我们在保存页面的时候自动格式化代码。 esformatter 和 ESlint 同样基于 espree开发,所以他们的配置都保持一致。

JavaScript

alcat2008

Dreamer, Practitioner, Incomplete Front-ender

← React & React Native的ES5... BigPipe →