cover 对一个开发团队或者产品线来说统一的代码规范是必须的,不规范的代码对后期代码的维护来说是灾难性的。前端代码更是有各种各样的风格,为了世界和平我们还是需要写规范的代码的,下面讲下如何用esling及浏览器插件来帮助我们写出风格统一的前端代码。

eslint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误,入门可参考ESLint 使用入门,详细配置可查看官方文档

命令行使用eslint

使用 npm 全局安装 eslint

npm install -g eslint  

这里还要顺带提一下babel-eslint,虽然eslint已经默认支持jsx和ES2015、ES2016和ES2017的语法,但要用到class等一些属性时还是会需要它来辅助eslint的,安装方法也很简单

npm install babel-eslint -g  

eslint需要一个 .eslintrc.*的配置文件来定义代码检查规则,可在命令行使用 eslint --init 命令来初始化一个配置文件,之后会询问使用何种配置,推荐使用如下配置

▶ eslint --init   
? How would you like to configure ESLint? 
  Answer questions about your style 
❯ Use a popular style guide 
  Inspect your JavaScript file(s) 
▶ eslint --init 
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? 
  Google 
  Airbnb 
❯ Standard 

如果目录下没有package.json会报错

▶ eslint --init   
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript 
  YAML 
  JSON 

上面选择了Standard风格的配置,Standard风格也是目前社区里最受欢迎的一种代码风格,省去了自己配置文件的繁琐步骤,强烈推荐使用。 之后命令行工具会自动生成配置文件并安装依赖。之后就可以在当前目录使用eslint *.js来检查代码了

eslint + sublime Text

在sublime Test内借助sublimeLinter和sublimeLinter-contrib-eslint两个插件配合eslint来检查代码,安装好这两个插件后sublime Text 会自动识别并读取项目根目录下的.eslintrc.*配置,同样推荐使用上面命令行方法来初始化eslint配置。 效果图 sublime

eslint + atom

atom基本同上,所用插件为linterlinter-eslint
效果图 atom

The end

这些工具只是辅助我们减少低级错误并养成习惯,刚开始用可能不太顺手,用一段时间当习惯养成后即使离开这些检查工具同样能写出漂亮且符合规范的代码。

扫描二维码,分享此文章

scc