Visual Studio 코드에서 ESLint를 사용하여 코드를 Lint 및 포맷하는 방법

Visual Studio 코드에서 ESLint를 사용하여 코드를 Lint 및 포맷하는 방법

2022-05-31 last update

14 minutes reading VS Code

소개


Visual Studio Code과 같은 편집기를 사용하여 자바스크립트를 작성할 때 코드 문법이 정확하고 현재의 최선의 실천에 부합되는 것을 확보하는 방법이 다르다.이 작업을 완료하려면 오버빔을 사용할 수 있습니다.Linter는 코드의 구문 오류를 확인하고 오류를 강조 표시하여 신속하게 찾고 수정할 수 있도록 합니다.ESLint은 코드의 완전성을 확보하기 위해 Visual Studio 코드 설정에 통합할 수 있는 linter입니다.
ESLint는 코드를 포맷하고 이를 분석하여 개선 사항을 제시할 수 있습니다.그것도 설정할 수 있다.이것은 당신이 코드의 계산 방식을 사용자 정의할 수 있다는 것을 의미한다.
이 강좌에서는 Visual Studio 코드에 ESLint를 설정하고 디버깅에서 로그 문장을 처리할 수 있도록 사용자 정의 설정을 합니다.또한 파일을 저장할 때 구문 오류를 자동으로 수정하도록 ESLint를 구성합니다.

선결 조건


이 강좌를 완성하려면 다음과 같은 내용이 필요합니다.
  • 기계에 설치된 최신 버전 Visual Studio Code.
  • 기계에 설치된 Node의 최신 버전.당신은 기계의 How to Install Node.js and Create a Local Development Environment에 따라 이 조작을 완성할 수 있습니다.
  • 이 강좌는 Visual Studio 코드 v1.62.3, ESLint 확장 v2.2.2 노드를 사용하여 검증되었습니다.js v17.2.0, npm v8.1.4와 eslint v8.3.0.

    단계 1 - JavaScript 시작 코드 만들기


    너는 시범 프로젝트부터 시작해야 한다.다음 명령을 사용하여 프로젝트에 대한 디렉토리를 만듭니다.
    1. mkdir vscode-eslint-example
    프로젝트 폴더가 생성되었습니다. vscode-eslint-example 디렉터리로 전환하십시오.
    cd vscode-eslint-example
    
    vscode-eslint-example 디렉토리에서 app.js이라는 JavaScript 파일을 만듭니다.
    1. touch app.js
    Visual Studio 코드에서 app.js을 엽니다.app.js 파일에서 다음 JavaScript 코드를 작성합니다.
    응용 프로그램.회사 명
    const name = 'James'
    
    const person = {first: name}
    
    console.log(person)
    
    const sayHelloLinting = (fName) => {
    console.log(`Hello linting, ${fName}`);
    };
    
    다음과 같은 몇 가지 형식 문제가 있습니다.
  • 인용 불일치
  • 분호 사용 불일치
  • 간격
  • 이 JavaScript 파일이 있으면 이 항목을 초기화할 수 있습니다.이 작업을 수행하려면 명령줄로 돌아가서 vscode-eslint-example 디렉토리에서 다음 명령을 실행합니다.
    1. npm init --yes
    npm init 명령을 사용하여 프로젝트를 초기화하면 package.json 디렉터리에 vscode-eslint-example 파일을 만들 수 있습니다.package.json은 프로젝트 의존 항목과 프로젝트의 다른 중요한 설정 설정을 저장합니다.

    이제 JavaScript 항목이 올바르게 설정되었으므로 ESLint를 설정할 수 있습니다.

    2단계 - ESLint 설정


    프로젝트에 대해 ESLint를 설정하기 전에 먼저 ESLint를 설치해야 합니다.
    npm install eslint --save-dev
    
    --save-dev 로고를 포함하는 것은 매우 중요합니다. 가방을 개발에만 사용되는 의존항으로 저장하기 때문입니다.이 예에서 eslint은 프로젝트를 적극적으로 처리하고 변경할 때만 필요한 패키지입니다.일단 프로젝트가 시작되거나 생산에 들어가면 eslint이 더 이상 필요하지 않을 것이다.--save-dev 로고를 사용하면 eslint이 개발 의존항으로만 package.json 파일에 열거되어 있음을 확보할 수 있습니다.
    현재 ESLint가 설치되어 있으며 다음 명령을 사용하여 프로젝트의 ESLint 구성을 초기화할 수 있습니다.
    1. ./node_modules/.bin/eslint --init
    이 명령의 중요한 부분은 --init 플래그입니다.명령의 ./node_modules/.bin/eslint 섹션은 프로젝트의 ESLint 경로입니다.--init 플래그를 사용하여 프로젝트의 ESLint를 활성화합니다.ESLint를 활성화하거나 초기화하면 프로젝트와 함께 작업하는 방법을 사용자 정의할 수 있는 ESLint 구성 파일이 생성됩니다.
    ESLint 구성 파일에 액세스하기 전에 프로젝트에 대한 다양한 질문이 표시됩니다.이러한 질문을 하는 것은 당신의 프로젝트를 초기화하는 설정이 당신의 요구에 가장 적합하다는 것을 확보하기 위해서입니다.
    첫 번째 힌트는 다음과 같습니다.
    ? How would you like to use ESLint? …
      To check syntax only
      To check syntax and find problems
    ❯ To check syntax, find problems, and enforce code style
    
    To check syntax, find problems, and enforce code style 옵션을 선택합니다.
    다음 힌트는 다음과 같습니다.
     What type of modules does your project use? …
      JavaScript modules (import/export)
    ❯ CommonJS (require/exports)
      None of these
    
    CommonJS 글로벌 변수를 사용하려면 CommonJS 옵션을 선택합니다.
    다음 프롬프트가 표시됩니다.
    ? Which framework does your project use? …
      React
      Vue.js
    ❯ None of these
    
    None of these 옵션을 선택합니다.
    다음 프롬프트는 다음과 같습니다.
    ? Does your project use TypeScript? › No / Yes
    
    No 옵션을 선택합니다.
    다음 프롬프트가 표시됩니다.
    ? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
    ✔ Browser
      Node
    
    Browser 옵션을 선택합니다.
    다음 프롬프트가 표시됩니다.
    ✔ How would you like to define a style for your project? …
    ❯ Use a popular style guide
      Answer questions about your style
      Inspect your JavaScript file(s)
    
    Use a popular style guide 옵션을 선택합니다.Which style guide do you want to follow? 프롬프트에서 Airbnb: https://github.com/airbnb/javascript 옵션을 선택합니다.
    다음 프롬프트는 다음과 같습니다.
    ? What format do you want your config file to be in? …
      JavaScript
      YAML
    ❯ JSON
    
    JSON 옵션을 선택합니다.
    그러면 다음 메시지가 표시됩니다.
    Checking peerDependencies of [email protected]
    The config that you've selected requires the following dependencies:
    
    [email protected] [email protected]^5.16.0 || ^6.8.0 || ^7.2.0 [email protected]^2.21.2
    
    마지막 프롬프트는 다음과 같습니다.
    ? Would you like to install them now with npm? › No / Yes
    
    Yes 옵션을 선택하여 npm의 의존 항목을 설치합니다.
    또한 추가 패키지를 설치해야 합니다.yes을 선택합니다.
    모든 프롬프트가 완료되면 .eslintrc.json이라는 파일이 vscode-eslint-example 디렉토리에 추가되었습니다.ESLint가 설치되었습니다.app.js의 코드가 변경되지 않았습니다.이는 ESLint가 Visual Studio 코드와 통합되어야 하기 때문입니다.

    3단계 - ESLint 확장 설치


    ESLint를 Visual Studio 코드에 통합하려면 Visual Studio 코드에 ESLint 확장을 설치해야 합니다.Visual Studio 코드로 돌아가서 Extensions 탭에서 ESLint를 검색합니다.확장자를 찾으면 설치 를 클릭합니다.

    Visual Studio 코드에 ESLint를 설치하면 app.js 파일에서 색상 밑줄이 강조 표시되는 오류가 발생합니다.이러한 태그는 심각도에 따라 색상 인코딩됩니다.밑줄이 있는 코드에 마우스를 걸면 오류를 설명하는 메시지가 표시됩니다.이러한 방식으로 ESLint는 코드와 구문 오류를 발견하고 삭제하는 데 도움을 줄 수 있습니다.
    ESLint를 사용하면 더 많은 작업을 수행할 수 있습니다.파일을 저장할 때마다 자동으로 오류를 수정할 수 있도록 ESLint를 수정할 수 있습니다.

    단계 4 - 저장 시 서식 적용


    ESLint를 저장할 때마다 구문 및 형식 문제를 자동으로 수정하도록 구성하려면 설정 메뉴를 엽니다.
    Visual Studio 코드에서 설정을 찾으려면 명령 팔레트를 사용하여 기본 설정을 엽니다. 작업공간 설정(JSON)을 엽니다.settings.json 파일이 코드 편집기에서 열립니다.파일을 저장할 때 ESLint에서 오류를 수정하려면 settings.json에서 다음 코드를 작성해야 합니다.
    .vscode/설정.json
    {
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "eslint.validate": ["javascript"]
    }
    
    settings.json 파일에 있는 이 코드가 있으면 ESLint가 자동으로 오류를 수정하고 저장할 때 JavaScript를 검증합니다.app.js 파일을 반환하고 저장합니다.색상이 옅은 밑줄을 포함하여 약간의 변화를 볼 수 있습니다.ESLint 수정 사항에는 다음과 같은 형식 문제가 있습니다.
  • 단인용호의 일치 사용
  • 함수 내부의 정확한 축진
  • 점의 일치 사용

  • 이제 app.js을 저장하면 ESLint가 자동으로 구문 오류를 해결합니다.여전히 약간의 잘못된 소식이 남아 있다.ESLint 구성을 사용자 정의하여 특정 오류 및 형식 문제를 캡처하거나 무시할 수 있습니다.

    단계 5 - ESLint 규칙 사용자 정의


    원래대로 ESLint는 console.log()의 모든 app.js 문장에 대해 강조 표시된 메시지를 생성합니다.경우에 따라 console.log문을 삭제하는 것이 우선순위가 아닐 수 있습니다.오류 메시지 없이 console.log 문장을 허용하도록 ESLint 구성을 사용자 정의할 수 있습니다..eslintrc.json 파일에서 ESLint 구성 규칙을 수정할 수 있습니다..eslintrc.json 파일을 엽니다.이것은 파일에서 볼 코드입니다.
    .eslintrc.json
    {
        "env": {
            "browser": true,
            "commonjs": true,
            "es2021": true
        },
        "extends": [
            "airbnb-base"
        ],
        "parserOptions": {
            "ecmaVersion": 12
        },
        "rules": {
        }
    }
    
    .eslintrc.json 파일의 아래쪽에 "rules" 객체가 표시됩니다.일부 코드 세그먼트에 대한 ESLint의 응답을 사용자 지정하거나 비활성화하려면 "rules" 객체에 키 값 쌍을 추가합니다.이 키는 추가하거나 변경할 규칙의 이름과 일치합니다.이 값은 문제의 심각도 수준과 일치합니다.심각도 수준에는 다음과 같은 세 가지 옵션이 있습니다.
  • error - 빨간색 밑줄 생성
  • warn - 노란색 밑줄
  • 생성
  • off - 컨텐츠가 표시되지 않습니다.
  • console.log 문장에 오류 메시지를 생성하지 않으려면 no-console 규칙 이름을 키로 사용할 수 있습니다.offno-console의 값으로 입력합니다.
    .eslintrc.json
    "rules" : {
        "no-console": "off"
    }
    
    console.logapp.js 문장에서 오류 메시지가 제거됩니다.

    심각도 수준 및 값을 포함하여 여러 정보가 필요한 규칙도 있습니다.코드에 사용할 따옴표 유형을 지정하려면 선택한 따옴표 유형과 심각도 수준을 동시에 입력해야 합니다.
    .eslintrc.json
    "rules" : {
        "no-console": "off",
        "quotes": [
            "error",
            "double"
        ]
    }
    
    이제 견적에 따옴표가 포함되면 ESLint에서 오류가 발생합니다.

    결론


    이 강좌는 Visual Studio 코드에서 ESLint를 사용하여 linting에 대해 수행할 수 있는 몇 가지 동작을 소개합니다.ESLint와 같은 Linting 도구는 검증 문법과 모범 사례를 자동화하고 간소화하여 더욱 복잡한 작업에 시간을 창출할 수 있다.
    사용자 정의 ESLint 규칙에 대한 규칙과 어떤 키 값을 사용할 수 있는지에 대한 자세한 내용은 documentation을 참조하십시오.