VS 코드에서 ESLint & Prettier를 설정하는 방법

10828 단어 javascriptcodenewbiewebdev

소개



ESLint와 prettier는 거의 모든 곳에서 사용되는 가장 인기 있는 도구이므로 오늘 우리는 eslint와 prettier가 무엇인지에 대해 이야기하고 오류 없이 vs 코드에서 설정하는 것이 얼마나 쉬운지 볼 것입니다.

ESLint란?



ESLint은 코드를 보다 일관되고 읽기 쉽게 만들기 위해 TypeScript/JavaScript 코드의 버그와 오류를 식별하는 데 사용되는 도구입니다. 린터라고도 합니다. ESLint는 코드를 정적으로 분석하여 문제를 빠르게 찾습니다. ESLint가 발견한 많은 문제는 자동으로 수정될 수 있습니다. 그리고 가장 중요한 부분은 프로젝트에 필요한 방식으로 정확하게 작동하도록 ESLint를 사용자 정의할 수 있다는 것입니다.

뭐가 더 예뻐



Prettier은 코드 형식을 지정하는 데 도움이 되는 도구입니다. 그것은 많은 언어를 지원합니다. 코드를 직접 포맷할 필요가 없기 때문에 시간과 에너지를 절약할 수 있습니다.

Prettier와 ESLint의 차이점



많은 사람들이 eslint와 prettier가 동일하게 작동한다고 생각하지만 큰 차이가 있습니다. Prettier는 코드 포맷터입니다. 아래의 경우 코드가 더 예쁘기 전과 비교하여 꽤 지저분하고 읽기가 매우 어렵다는 것을 알 수 있습니다.

프리티어 전

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
       <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
  </head>
        <body>
        <div id="app"></div>
              <script type="module" src="/main.js"></script>
  </body>
</html>


애프터 프리티어

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>


그리고 eslint는 linter입니다. 아래의 경우와 같이 eslint에서 'hello'가 선언되었지만 값을 읽지 않는다는 오류를 표시하는 것을 볼 수 있습니다.

import './style.css'

const hello = 'WASSUP GUYS' // 'hello' is declared but its value is never read


보시다시피 이것은 우리가 생성했지만 사용하지 않고 제거하는 것을 잊은 사용하지 않는 변수나 함수가 없는 프로젝트를 만들 것입니다.

Vite로 ESLint 및 Prettier 설정



vite가 무엇인지 모르는 경우 vite를 사용하여 프로젝트를 생성할 것입니다. 그런 다음 내 이전 . vite 프로젝트를 생성하려면 터미널을 열고 특정 디렉토리로 이동한 후 다음 명령을 붙여넣습니다.

npm init @vitejs/app


프로젝트 이름을 지정하고 튜토리얼 프로젝트이므로 바닐라 js를 선택하십시오. 그런 다음 디렉터리를 해당 폴더로 변경하고 모든 모듈을 설치합니다.

cd *your project name*
npm install
npm run dev


이제 아래 코드를 복사하여 터미널에 붙여넣으십시오. 프로젝트 폴더에 있는지 확인하십시오.

npm install -D eslint prettier eslint-config-prettier


다운로드 후 package.json 파일에서 모든 종속성을 볼 수 있습니다. vs 코드에서 eslint 및 더 예쁜 확장을 설치합니다.

{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.2",
    "vite": "^2.3.8"
  }
}


그런 다음 터미널에서 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
√ Does your project use TypeScript? · No
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript


그러면 프로젝트 디렉터리에 .eslintrc.js 파일이 생성되었음을 알 수 있습니다. 그것을 열고 extends 속성에 prettier를 추가하십시오.

// eslint-disable-next-line no-undef
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'prettier'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {},
}


그런 다음 프로젝트 디렉토리에 .prettierrc 파일을 생성하고 테스트를 위해 이 두 가지 규칙을 추가합니다.

{
  "semi": false,
  "singleQuote": true
}


더 예쁜 파일과 eslint에 추가할 수 있는 많은 규칙이 있습니다. 관련 문서를 확인하세요. 그런 다음 javascript 파일에 큰따옴표를 추가하려고 하면 자동으로 작은따옴표로 변경됩니다.

import './style.css'

const hello = 'WASSUP GUYS'


결론



그래서 오류 없이 vs code에서 eslint와 prettier를 설정하는 방법에 대해 이야기를 나눴습니다. eslint & prettier와 관련하여 문제가 있는 경우 댓글 섹션에서 자유롭게 질문하십시오. 이것은 prettier와 eslint를 위한 매우 기본적인 설정이며 설명서를 따르는 것이 좋습니다. 대부분의 사람들이 사용하는 Airbnb 구성을 사용할 수도 있습니다.
Unity의 iTween을 사용해보십시오.
React Hooks를 사용한 상태 관리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage