eslint 간단한 사용

eslint 간단한 사용

Date: 2017-02-17

개시하다

eslint는 ECMAScript/JavaScript 코드에서 보고 모드와 일치하는 것을 식별하고 보고하는 도구로 코드의 일치성을 확보하고 오류를 피하는 것을 목표로 한다.(공식 번역)
두 가지 설치 방법

글로벌

모든 프로젝트 파일에 적용
ESLint 플러그인을 먼저 전역적으로 설치합니다.

$ npm install -g eslint

구성 파일 초기화

eslint --init

사용

./node_modules/.bin/eslint file.js --fix

프로파일

init 설정 파일을 초기화하면 프로젝트에 하나를 얻을 수 있습니다.eslintrc.js의 파일입니다.당연히 있겠지.json YAML 등의 형식입니다.

module.exports = {
    "extends": "airbnb",//    
    "plugins": [//  
          "react",
          "jsx-a11y",
          "import"
    ],
    "env": {//    
      "browser": true,
      "node": true
    },
     "rules": {//  
        "semi": "error"
    }
}

package.json에서 사용

"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
    "plugins": ["react"],
    "env": {
        "browser": true
    }
}

Rules

"off"또는 0 - 닫기 규칙

"warn"또는 1 - 규칙을 열고 경고 레벨의 오류를 사용합니다: warn(프로그램 종료를 초래하지 않습니다)

"error"또는 2 - 규칙을 열고 오류 단계의 오류를 사용합니다: error(터치될 때 프로그램이 종료됩니다)

만약 확장 규칙, 예를 들어airbnb를 채택한다면 기본값이 있을 것이다. 그리고nodemodule에rules가 있으면 프로필을 더 이상 쓸 필요가 없습니다.그러나 우리는 어떤 규칙을 닫는 역할을 하기 위해 넓게 덮어쓰는 것을 쓸 수 있다.예를 들어 이 규칙들은 모두 구글에서

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
  "react/forbid-prop-types": 0,
  "react/no-array-index-key": 0,
  "react/jsx-wrap-multilines": 0,
  "react/prop-types": 1,
  "jsx-a11y/no-static-element-interactions": 0,
  "no-underscore-dangle": 0,
  "no-script-url": 0,
  "class-methods-use-this": 0,
  "no-constant-condition": 0,
  "max-len": 0,
  "no-nested-ternary": 0,
  "semi": 1,
  "space-before-function-paren": 1
}

.eslintignore

프로젝트 루트 디렉토리를 생성하여 ESLint에 일부 파일이나 디렉토리가 무시되었음을 알릴 수 있습니다.상당하다.gitignore는 모두 순수한 텍스트 파일입니다.
예컨대

#   ，    
node_modules
**/.js
build

웹팩 사용

eslint-loader를 설치한loader

module:{
    preLoaders: [
      {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
    ],
    loaders:[
    {
        test:/\.jsx?$/,
        exclude:/node_modules/,
        loader:'babel'
    },
    {
        test:/\.css$/,
        loaders:['style','css'],
        include:'/dist'
    }]
}

pre-commit와 결합하여 사용

때때로 우리 프로젝트의 후입eslint에 들어갈 수도 있습니다. 이전의 파일이 너무 많아서 고칠 수 없지만 천천히 가입해야 합니다.git의 hooks를 추가할 수 있습니다.

프로젝트 로컬 설치 npm install --save-dev pre-commit

package.json 설정

예컨대

{
    "script": {
        "lint": "git diff-tree --no-commit-id --name-only -r $REVISION | xargs pre-commit run --files."
    },
    "pre-commit": [
        "lint"
    ],
}

pre-commit
git 갈고리 (사용자 정의 가능)
갈고리는 모두 Git 디렉터리의 훅스 디렉터리에 저장된다

cd .git/hooks && ls

이러한 갈고리의 기능은 주로 제출 작업 흐름 갈고리, 전자 우편 작업 흐름 갈고리와 기타 갈고리로 나뉜다.예를 들어 코드를 제출하기 전에 검사를 하고 같은 그룹 개발자에게 메일을 보내는 등이다.
git hooks
물론 eslint도gulp와 결합하여 컴파일러에 사용할 수 있다.이것들은 인터넷에서 모두 찾을 수 있다.예를 들어 제가 지금 Tom에서 쓰고 있는 건 바로 Bao 패키지를 다운받았어요.

apm install linter-eslint