Visual Studio Code 및 ESLint로 저장할 때 Linting을 활성화하는 방법

소개

스타일 가이드를 사용하면 일관되고 재사용 가능하며 깔끔한 코드를 작성할 수 있습니다. 이러한 규칙은 린터로 자동화 및 시행할 수 있습니다. 이렇게 하면 수동으로 들여쓰기를 확인하거나 작은따옴표나 큰따옴표를 사용하지 않아도 됩니다.

Visual Studio 코드는 모든 저장에서 Linting을 지원할 수 있습니다. 워크플로는 코드 배포를 지연시킬 수 있는 많은 큰 문제를 해결하는 대신 시간이 지남에 따라 작은 문제를 해결하기 위해 린트 검사를 자주 수행함으로써 이점을 얻을 수 있습니다.

이 자습서에서는 ESLint를 설치하고 규칙을 구성하며 Visual Studio Code에서 codeActionsOnSave를 활성화합니다.

전제 조건

이 기사를 따라 하려면 다음이 필요합니다.

최신 버전의 Visual Studio Code를 다운로드하여 설치합니다.
Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.

이 자습서는 Node v16.6.2, npm v7.21.0, eslint v7.32.0 및 Visual Studio Code v1.59.1에서 검증되었습니다.

1단계 – 프로젝트 설정

언어와 프로젝트 유형에 따라 다양한 린터가 있습니다. 이 자습서의 필요에 따라 ESLint를 설치 및 구성해야 합니다.

먼저 새 프로젝트 디렉토리를 만듭니다.

mkdir eslint-save-example

그런 다음 프로젝트 디렉터리로 이동합니다.

cd eslint-save-example

새 프로젝트를 초기화합니다.

npm init -y

그리고 eslint를 설치합니다:

npm install eslint@7.32.0

그런 다음 eslint를 초기화합니다.

npx eslint --init

다음 선택 사항을 사용하여 프롬프트에 응답합니다.

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Browser, Node
? What format do you want your config file to be in? JavaScript

이 시점에서 package.json 및 .eslintrc.js 파일이 포함된 새 프로젝트가 생성됩니다.

Visual Studio Code에서 ESLint를 사용하려면 Visual Studio Code의 마켓플레이스에서 제공되는 ESLint 확장을 설치해야 합니다.

2단계 – 오류가 있는 예제 만들기

다음으로 일관성 없는 간격 및 들여쓰기, 따옴표 및 세미콜론과 같은 일반적인 규칙을 의도적으로 위반하는 JavaScript 파일을 만듭니다.

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

Visual Studio Code에서 파일을 열고 ESLint 규칙 위반에 대한 표시를 관찰합니다.

helloYou에 밑줄이 그어져 있습니다. Visual Studio Code에서 이 줄 위로 마우스를 가져가면 helloYou에 값이 할당되었지만 사용되지 않았습니다라는 도구 설명 메시지가 표시됩니다. 이는 .eslint(no-unused-vars) 규칙이 eslint:recommended에 의해 활성화되기 때문입니다.

다음 변수를 사용하여 이 문제를 해결할 수 있습니다.

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

console.log(helloYou)

다른 문제를 해결하려면 규칙을 추가해야 합니다.

3단계 – 규칙 추가

eslint --init는 eslintrc.js(또는 옵션인 경우 .yml 또는 .json)이라는 파일을 생성했습니다. 당신이 선택한):

module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
    'node': true
  },
  'extends': 'eslint:recommended',
  'parserOptions': {
    'ecmaVersion': 12,
    'sourceType': 'module'
  },
  'rules': {
  }
};

일관된 간격과 들여쓰기를 위한 규칙을 추가해 보겠습니다. 그리고 큰따옴표보다 작은따옴표를 선호합니다. 또한 줄 끝에 필수 세미콜론을 적용합니다.

module.exports = {
  // ...
  'rules': {
    'quotes': ['error', 'single'],
    // we want to force semicolons
    'semi': ['error', 'always'],
    // we use 2 spaces to indent our code
    'indent': ['error', 2],
    // we want to avoid extraneous spaces
    'no-multi-spaces': ['error']
  }
};

변경 사항을 파일에 저장합니다.

코드 편집기에서 이전에 생성한 JavaScript 파일을 엽니다. 깨진 규칙이 모두 표시됩니다.

ESLint 확장 프로그램이 설치되어 있으면 CTRL+SHIFT+P를 사용하여 명령 팔레트를 열 수 있습니다. 그런 다음 ESLint: Fix all auto-fixable Problems를 검색하고 ENTER(또는 RETURN)를 누릅니다.

자동 수정 가능한 문제가 수정됩니다.

const helloYou = (name)=> {
  name = 'you' || name ;
  console.log('hello' + name + '!' );
};

console.log(helloYou());

들여쓰기를 세고 따옴표와 세미콜론을 확인할 필요가 없습니다!

4단계 – 저장 시 코드 작업 추가

ESLint: Fix all auto-fixable Problems를 주기적으로 수동으로 실행하는 것은 그다지 신뢰할 수 없습니다. 그러나 작업을 저장할 때마다 Lint 규칙을 실행하면 더 안정적일 수 있습니다. CTRL+S(또는 COMMAND+S)를 누를 때마다 자동 수정을 실행하도록 ESLint를 설정할 수 있습니다.

동일한 파일에서 ESLint가 올바르게 작동하려면 Visual Studio Code 기본 설정을 변경해야 합니다. 파일 > 기본 설정 > 설정(또는 코드 > 기본 설정 > 설정)으로 이동합니다.

이 자습서에서는 작업 공간 설정을 수정합니다. 모든 프로젝트에 이러한 설정을 적용할 수도 있습니다. Workspace를 클릭하고 Code Actions On Save를 검색합니다.

Editor: Code Actions On Save
Code action kinds to be run on save.

Edit in settings.json

그런 다음 settings.json을 클릭합니다.

{
  "editor.codeActionsOnSave": null
}

settings.json에 다음 코드를 붙여넣습니다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"]
 }

이제 이전에 생성한 JavaScript 파일에 대한 수정 사항을 실행 취소합니다. 그런 다음 파일을 저장합니다. 자동 수정 가능한 문제는 자동으로 해결됩니다.

결론

이 자습서에서는 Visual Studio Code에서 ESLint를 설치하고 규칙을 구성하고 codeActionsOnSave를 활성화했습니다.