VS Code에서 Python과 JS의 Linting & Formatting 적용하기

Linter

---

• 코드를 분석해서 문법 에러, 버그를 찾아주는 도구를 말합니다.
• 문법 에러, 특정 문법 사용 등 코드 퀄리티와 관련된 작업을 수행합니다.
• 상황에 따라 고쳐주기 까지하며 언어에 맞는 문법을 지킬 수 있도록 도와줍니다.
• 자바스크립트에는 JS Lint JS Hint ESLint 가 존재합니다.
• 파이썬에는 pylint pycodestyle pyflakes flake8 pyright 가 존재합니다.

해당 글 에서는 ESLint와 flake8을 사용했습니다.

Formatter

---

• 한 줄의 최대 길이나, tab을 쓸 것인지 space를 쓸 것인지, 인용 스타일은 무엇을 쓸 것인지 등 문법적으로는 문제가 되지 않지만 코드의 미학적인 부분을 바로잡는 작업을 수행합니다.
• 일관적인 코드 스타일을 강제 함으로써 전체적인 가독성이 높아집니다.
• 자바스크립트에서는 prettier 를 주로 사용합니다.
• 파이썬에서는 autopep8 yapf black 이 존재합니다.

해당 글에서는 prettier와 black을 사용했습니다.

Why?

---

• 다른 사람들과 함께 작업할 때 주관적인 스타일에서 벗어나 통일된 스타일을 위해서 사용합니다.
• 문서 또는 구두약속으로 지키는 것이 어렵기 때문에 Linting과 formatter를 사용하여 강제합니다.
• 인덴트, 세미콜론 여부, 띄어쓰기, condition 표현식 등 Code format을 통일함으로써 불필요한 file change 방지합니다.
• 항상 통일된 문법과 통일된 스타일의 코드를 보기 때문에 가독성이 높아져 일의 효율을 높일 수 있습니다.

Requirements

---

• vscode extenstion 에서 Python Eslint Perttier 설치합니다.

 

Javascript

---

Eslint (linter)

• package.json 파일과 같은 위치에 .eslintrc.js 파일을 만들어 줍니다.
• 사용하는 프레임워크에 따라 다른 설정이 필요할 수도 있습니다. 아래 설정은 Vue에서 사용하는 설정입니다.
• 아래와 같은 설정을 입력합니다. ( 더 많은 eslint 규칙 찾아보기 )
  1. eslint:recommended eslint 가 추천하는 기본 규칙입니다
  2. vue/essential Vue에서 배포한 규칙으로 base 규칙과 함께 에러를 내는 코드와, 예상치 못한 결과를 낳는 코드를 예측합니다
  3. no-console console이 사용되고 있을 경우 터미널 창에 경고를 표시합니다.
  4. prettier/recommended Prettier pulgin의 기본 규칙을 사용합니다 ("prettier/prettier" : "error" rule을 통해 eslint를 침범하는 prettier 설정은 error로 표시됩니다 )

// .eslintrc.js
module.exports = {
  root: true
  env: {
    node: true,
  },
  plugins: ['prettier'],
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'prettier/prettier': 0,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

• eslint 적용이 필요 없는 파일과 폴더는 .eslintignore 에 등록해줍니다

// .eslintignore
**/node_modules/*
**/vendors/*
**/dist/*

Prettier (formatter)

• package.json 파일과 같은 위치에 .prettierrc.json 과 .prettierignore 파일을 만들어 줍니다.
• 아래와 같은 설정을 입력합니다. ( 더 많은 prettier 규칙 찾아보기 )
  1. "trailingComma": "es5" es5에서 마지막 줄에 콤마를 사용합니다
  2. "tabWidth": 2 탭의 크기는 2입니다
  3. "semi": true 세미콜론을 사용합니다
  4. "singleQuote": true 인용 스타일을 ' ' 로 사용합니다

// .prettierrc.json
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
    "printWidth": 88
}

• prettier 적용이 필요 없는 파일과 폴더는 .prettierignore에 등록해줍니다

// .prettierignore
**/node_modules/**

 

혹시 설정이 먹히지 않는다면 vscode 명령어 창에서 Format Document With을 입력 후 prettier를 선택해주세요.

Python

---

flake8 (linter)

1. pip install flake8 을 통해서 flake8을 설치해줍니다.
2. Window의 경우 ctrl+shift+p MacOS의 경우 cmmand+shift+p 를 통해 vscode 명령어 창을 열어줍니다.
3. vscode 명령어 창에서 Python: Select Linter 을 입력 후 flake8을 선택해 줍니다.
4. vscode 명령어 창에서 Preferences : Open Settings (JSON) 을 클릭합니다. (해당 폴더에만 적용하고 싶을 경우 Open Workspace Settings를 클릭합니다.)
5. setting.json 파일에 아래와 같은 설정을 입력합니다. ( 더 많은 flake8 규칙 찾아보기 )
   • 한 줄의 최대 길이는 88로 제한합니다. (해당 길이는 black의 기본값이며 black과 충돌을 방지하기 위해 써줍니다.)
   • black과 함께 사용할 때 충돌을 방지하기 위해 W503 에러는 무시합니다.

{
    "editor.formatOnSave": true, // 저장할 때마다 적용될 수 있도록 합니다.
    "python.linting.flake8Enabled": true, // 3번을 통해서 이미 설정 되어있다.
    "python.linting.enabled": true,  // 3번을 통해서 이미 설정 되어있다.
    "python.linting.flake8Args": ["--max-line-length=88", "--ignore=W503"],
}

black (formmater)

1. pip install black 을 통해서 black을 설치해줍니다.
2. Window의 경우 ctrl+shift+p MacOS의 경우 cmmand+shift+p 를 통해 vscode 명령어 창을 열어줍니다.
3. vscode 명령어 창에서 Preferences : Open Settings (JSON) 을 클릭합니다. (해당 폴더에만 적용하고 싶을 경우 Open Workspace Settings를 클릭합니다.)
4. setting.json 파일에 아래와 같은 설정을 입력합니다.

"editor.formatOnSave": true, // 저장할 때마다 적용될 수 있도록 합니다.
"python.formatting.provider": "black",

Reference

---

 

VS Code에서 ESlint와 Prettier 함께 사용하기