머리

추가 (2018/05/24): 브라우저에서 작동하도록 수정된 Linter 클래스를 게시합니다.

eslint4b

이 패키지를 이용하는 것으로, 추가의 수정 없이 Webpack 등으로 Linter 클래스를 읽어들일 수가 있습니다. 또한이 패키지는 Travis CI의 Cron 기능을 통해 최신 ESLint를 기반으로 빌드를 지속적으로 생성하고 게시합니다.

활용해 주세요.

ESLint는 대외적으로 브라우저 내에서 실행을 지원하지 않습니다( eslint / eslint # 2585 , eslint / eslint # 8348 ). 그러나, 공식 사이트에 설치되어 있는 온라인 데모 때문에, 조금 다루면 브라우저내에서 실행할 수 있습니다.

이 기사에서는 ESLint를 브라우저 내에서 사용하기 위한 webpack 설정을 소개합니다.

ESLint의 Node.js API

ESLint의 Node.js API는 크게 두 가지 클래스로 구성됩니다.

CLIEngine

주로 사용되는 클래스입니다.
파일의 검증 engine.executeOnFiles(files) 이나 캐릭터 라인의 검증 engine.executeOnText(code, filePath) 등의 메소드를 가집니다. 이러한 메소드에서는, 대상 파일의 패스에 근거해 설정 파일을 읽어들여, 설정에 있는 공유 설정이나 플러그 인을 검색해 읽어들입니다. 마지막으로, 얻은 코드와 설정과 플러그인을 바탕으로 후술하는 Linter 오브젝트를 작성해, 검증을 실시합니다.
파일 시스템과 밀접하게 결합되어 브라우저 내에서 사용할 수 없습니다.

린터

검증을 실시하는 핵심 클래스입니다.
브라우저 내부에서 이용하기 위해서, 파일 시스템에 의존하지 않는 핵심 처리만을 추출한 것입니다. 따라서 설정 파일을 검색하거나 공유 설정 및 플러그인을 해결할 수 없습니다. linter.defineRule(ruleId, definitionObject) 에서 규칙을 정의하고 linter.verify(code, config) 에서 확인합니다.

이번은 물론 Linter 클래스를 이용합니다.

종속 패키지 설치

필요한 패키지를 설치합니다.

$ npm install --save-dev eslint webpack string-replace-loader

webpack 설정

Webpack 설정을 작성합니다.

방금 전에 Linter는 파일 시스템에 의존하지 않는 부분을 추출했다고 말했지만, 불행히도 지금은 한 곳만 파일 시스템에 의존하고 있습니다. 그러므로 string-replace-loader 에 조금 손을 넣어 해야 합니다.

webpack.config.js

const fs = require("fs")
const path = require("path")
const webpack = require("webpack")

module.exports = {
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, "./dist"),
        publicPath: "/",
        filename: "index.js",
    },
    module: {
        rules: [
            // `eslint/lib/load-rules.js` は `fs` に依存してコアルールを列挙しているため、中身を静的コードに置き換える。
            {
                test: new RegExp(`eslint\\${path.sep}lib\\${path.sep}load-rules\\.js$`),
                loader: "string-replace-loader",
                options: {
                    search: "[\\s\\S]+", // whole file.
                    replace: "module.exports = () => ({})",
                    flags: "g",
                },
            },
        ],
    },
}

샘플 코드

그리고 ESLint를 이용하는 코드를 씁니다.

index.js

// "eslint" を読み込むと CLIEngine が含まれてしまうため、内部ファイルを参照する必要がある。
import Linter from "eslint/lib/linter.js"
import semiRule from "eslint/lib/rules/semi.js"

// Linter を作る。
const linter = new Linter()

// 試しにてきとーなルールを定義してみる。
linter.defineRule("no-string", (context) => ({
    Literal(node) {
        if (typeof node.value === "string") {
            context.report({node, message: "Don't use string!"})
        }
    }
}))
// semi ルールも定義してみる。
linter.defineRule("semi", semiRule)

// 検証する
const code = "console.log('Hello!')"
const config = {
    rules: {
        // 上で定義したルールを有効にする設定。
        "no-string": "error",
        "semi": "error"
    }
}
const lintErrors = linter.verify(code, config)

// 表示する
console.log(lintErrors) //→ 結果は以下

결과

[ { ruleId: 'no-string',
    severity: 2,
    message: 'Don\'t use string!',
    line: 1,
    column: 13,
    nodeType: 'Literal',
    source: 'console.log(\'Hello!\')',
    endLine: 1,
    endColumn: 21 },
  { ruleId: 'semi',
    severity: 2,
    message: 'Missing semicolon.',
    line: 1,
    column: 22,
    nodeType: 'ExpressionStatement',
    source: 'console.log(\'Hello!\')',
    fix: { range: [Array], text: ';' } } ]

후기

이상, ESLint를 브라우저 내에서 이용하는 방법이었습니다.

이번에는 Webpack 을 이용했습니다만, 다른 번들러를 사용하고 있는 경우에서도 특정의 파일의 내용을 옮겨놓는 구조가 있으면 이용 가능합니다.

요 전날 공개한 Playground for eslint-plugin-vue 에서는, 이러한 방법을 이용해 ESLint 를 이용하고 있습니다.
ESLint를 사용하는 웹 응용 프로그램을 만들어 보겠습니다