ESLint的使用笔记

JavaScript 代码检验工具 ESLint 在 TypeScript 团队发布全面采用 ESLint
之后,发布 typescript-eslint
专案,以集中仓库解决
TypeScript 和 ESLint 相容性问题。而 ESLint 团队将不再维护
typescript-eslint-parser,也不会在 Npm 上发布,TypeScript
解析器转移至Github 的 typescript-eslint/parser。

结语

至此,ESLint 使用入门就介绍完了。但是,我们不应该仅仅是使用 ESLint
这个工具,更应该学习 ESLint
背后的设计理念:不求大而全,但求搭好扎实的基础架构,提供良好的、可扩展的
API。小到插件,大到应用程序开发,这一原则都适用。

由此,很容易让我联想到 WordPress —— 不用修变源代码,通过 hook、filter
机制实现前台、后台所有功能的定制、扩展,其成功离不开这一特性。

Coding 之外,《罗辑思维》所倡导的「U
盘化生存」(自带信息,不装系统,随时插拔,自由协作)不也是这样一种理念吗?不是我不明白,这世界变化快。经验固然有用,但在日新月异的技术潮流中,学习、适应能力更为重要。

澳门新葡亰8455下载app 1

代码风格检测

在团队协作中,统一的代码风格更具可读性、可维护性。ESLint
内置了一系列有关代码风格的规则,可以根据团队的编码规范设置。

(文/开源中国)    

配置

可以通过以下三种方式配置 ESLint:

  • 使用 .eslintrc 文件(支持 JSON 和 YAML 两种语法);
  • 在 package.json澳门新葡亰8455下载app, 中添加 eslintConfig 配置块;
  • 直接在代码文件中定义。

.eslintrc 文件示例:

{
  "env": {
    "browser": true,
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "globals": {
    "angular": true,
  },
  "rules": {
    "camelcase": 2,
    "curly": 2,
    "brace-style": [2, "1tbs"],
    "quotes": [2, "single"],
    "semi": [2, "always"],
    "space-in-brackets": [2, "never"],
    "space-infix-ops": 2,
  }
}

 

.eslintrc 放在项目根目录,则会应用到整个项目;如果子目录中也包含 .eslintrc 文件,则子目录会忽略根目录的配置文件,应用该目录中的配置文件。这样可以方便地对不同环境的代码应用不同的规则。

package.json 示例:

{
  "name": "mypackage",
  "version": "0.0.1",
  "eslintConfig": {
    "env": {
      "browser": true,
      "node": true
    }
  }
}

 

文件内配置

代码文件内配置的规则会覆盖配置文件里的规则。

禁用 ESLint:

/* eslint-disable */
var obj = { key: 'value', }; // I don't care about IE8  
/* eslint-enable */

 

禁用一条规则:

/*eslint-disable no-alert */
alert('doing awful things');  
/* eslint-enable no-alert */

 

调整规则:

/* eslint no-comma-dangle:1 */
// Make this just a warning, not an error
var obj = { key: 'value', } 

 

因此 TypeScript 的编辑器团队决定专注支援 ESLint,增加语义 Linting
和程式范围 Linting
等目前尚未包含的使用情境,同时,他们也承诺,会提供贡献以强化 ESLint 对
TypeScript 的支援,同时也在 TypeScript 储存库中使用
ESLint,使其成为工具实践的测试平台,并向上发送所有新规则。

原文地址:

在团队协作中,为避免低级
Bug、产出风格统一的代码,会预先制定编码规范。使用 Lint
工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。

在以前的项目中,我们选择 JSHint 和 JSCS 结合使用,WebStorm
等开发环境已经支持这些工具,使用起来很顺手。然而,最近使用 React JSX
语法时,却遇到了问题:JSHint 不支持 JSX
语法。虽然有 JSXHint 这样的 JSHint
衍生工具,但个人并不喜欢这样的实现方式:不是以插件的形式实现,而是重新重新包装了一个工具。Nicholas
C.
Zakas 也不喜欢,所以有了 ESLint。

原来选择 JSHint 的时候,也对比过 ESLint,基于 ESLint 在速度上比 JSHint
要慢一些,最终使用了
JSHint。现在需要 JSX 支持了,才发现 ESLint 的设计理念更符合实际需求。

但是编辑器团队提到,TSLint 的规则运作方式存在架构性的效能问题,
如果要维持效能将需要不同的 API,而这将破坏既有规则,相反的 ESLint
则具有更高效能的架构,而且不少热门专案的社群,诸如 React Hooks 和
Vue,都是使用 ESLint 建构 Lint 规则。

工作流集成

ESLint
可以集成到主流的编辑器和构建工具中,以便我们在编写的代码的同时进行
lint。

编辑器集成

以 WebStorm 为例,只要全局安装 ESLint 或者在项目中依赖中添加 ESLint
,然后在设置里开启 ESLint
即可。其他编辑可以从官方文档中获得获得具体信息。

构建系统集成

在 Gulp 中使用:

var gulp = require('gulp');  
var eslint = require('gulp-eslint');

gulp.task('lint', function() {  
  return gulp.src('client/app/**/*.js')
    .pipe(eslint())
    .pipe(eslint.format());
});

 

其他构建工具参考官方文档。

网站地图xml地图