Airbnb의 스타일 가이드와 Prettier로 Eslint를 설정하는 빠른 가이드

Eslint 및 Prettier은 아마도 웹 개발에서 가장 많이 사용되는 도구일 것입니다. Eslint는 JavaScript 코드의 문제를 찾고 수정하는 데 도움을 주고 Prettier는 독단적인 코드 포맷터입니다.

Eslint는 매우 유연한 린터입니다. 필요에 따라 사용자 지정할 수 있습니다. 그러나 초보자에게는 Eslint가 제공하는 옵션이 압도적일 수 있습니다. 그리고 이것은 AirBnB에서 제공하는 style guide이 유용한 곳입니다.

Note: There are other popular styles guide too like Standard Style guide and Google's Style Guide for JavaScript. The process is same if you want to follow these guides instead.

에스린트

Eslint를 설치하려면 Node.js와 함께 제공되는 npm package manager을 사용합니다. 다음 명령을 입력하여 기본 구성으로 package.json 파일을 만듭니다.

npm init -y

이제 준비가 되었습니다! 다음 명령어로 Eslint를 설치합니다.

npm install eslint --save-dev

Eslint는 규칙을 적용하기 위해 구성 파일이 필요합니다. 구성 파일을 만드는 쉬운 방법은 다음 명령을 입력하는 것입니다.

npx eslint --init

이 명령은 선택할 수 있는 몇 가지 옵션을 제공합니다.
세 번째 옵션을 사용하겠습니다.



이제 Enter 키를 누르고 필요에 따라 다른 옵션을 선택하십시오. 이 옵션을 만나기 전까지는



여기에서 첫 번째 옵션으로 이동한 다음 Airbnb의 스타일 가이드를 선택합니다.



선택한 항목에 따라 package.json 파일은 다음과 같습니다.

{
  "name": "eslint",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^7.13.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1"
  }
}

이 명령은 또한 작업 디렉토리에 eslint 구성 파일을 생성합니다.

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
  },
};

Eslint는 마침내 몇 가지 버그를 찾아 수정할 준비가 되었습니다. 이제 터미널에서 Eslint를 실행할 수 있지만 더 쉬운 옵션이 있습니다. VS Code에 eslint extension을 설치하면 텍스트 편집기에서 실수에 대해 직접 불평합니다.

더 예뻐

prettier를 혼합할 시간입니다. 로컬에 prettier를 설치하려면 다음 명령을 입력하세요.

npm install --save-dev --save-exact prettier

그런 다음 빈 구성 파일을 만들어 편집자 및 기타 도구에서 Prettier를 사용하고 있음을 알립니다.

echo {}> .prettierrc.json

이 json 파일에는 코드 형식을 지정하기 위해 더 예쁜 코드rules가 있습니다. 기본 구성은 다음과 같습니다.

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

명령줄에서 Prettier를 사용할 수 있지만 편집기에서 실행하여 Prettier를 최대한 활용할 수 있습니다. VS Code용 확장Prettier을 설치해 보겠습니다. 설치 후 모든 JS 파일이 Prettier로 포맷되었는지 확인해야 하므로 VS Code의 settings.json 파일에 다음 줄을 추가합니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

이제 저장할 때마다 코드 형식을 지정하도록 VS Code를 구성합니다. 동일한 settings.json 파일에 다음 줄을 추가합니다.

"editor.formatOnSave": true,

최종 보스

거의 완료되었지만 Eslint와 Prettier가 서로 잘 작동하도록 npm 패키지eslint-config-prettier를 추가로 설치해야 합니다. 불필요하거나 Prettier와 충돌할 수 있는 모든 ESLint 규칙을 끕니다. 계속해서 패키지를 설치하십시오.

npm i eslint-config-prettier

그런 다음 .eslintrc.* 파일의 "extends"배열에 eslint-config-prettier(또는 그냥 더 예쁘다)를 추가합니다. 다른 구성을 재정의할 기회를 얻을 수 있도록 마지막에 넣어야 합니다.

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: ['airbnb-base', 'prettier'],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {},
};

그게 다야!! 이것이 마지막 단계였습니다. 이제 eslint와 prettier가 모두 올바르게 구성되었습니다. Eslint는 코드의 실수에 대해 불평하고 Prettier는 완벽하게 형식을 지정합니다.

결론

이것은 빙산의 일각에 불과합니다. 가지고 놀 수 있는 수백 가지Eslint Rules가 있습니다. 또한 Node , React , Vue , Jest 등에 대한 추가 Eslint linting 규칙을 찾을 수 있습니다. JavaScript 코드에서 보안 허점을 찾는 데 도움이 되는 eslint-plugin-security이라는 패키지도 있습니다. 이 게시물이 Eslint 및 Prettier를 시작하는 데 도움이 되었기를 바랍니다.