오늘은 ESLint의 개념과 적용 및 사용방법을 정리해보려 한다.
우선 개발환경은 아래와 같다.
개발환경: Visual Studio CODE, node, Vue3
ESLint란
ES : Ecma Script의 약자로 Javascript를 의미한다.
Lint : Lint는 소프트웨어 용어로 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에
표시(flag)를 달아놓기 위한 도구를 의미한다.
즉 Javascript로 작성한 코드에서 오류, 버그, 의심되는 부분에 표시(flag)를 달아놓기 위해 사용되는 도구라고 할 수 있다.
ESLint를 사용하는 이유
javascript 언어 특성상 빌드시 에러는 나지 않는다. 컴파일 언어가 아니기 때문인데,
그렇다고 에러가 나지 않는 것은 아니다. 결국 웹서버를 구동하면 에러가 나기 마련이기 때문에
웹서버 구동전에 문법적인 오류를 ESLint를 통해서 미리 잡을 수 있다.
또는 오류는 아니지만 코드 퀄리티 향상을 위해 변수를 선언 했지만 사용하지 않는 등의 오류를 미리 잡을 수 있다.
즉 ESLint를 사용하면 미리 코드의 오류를 캐치하거나, 코드 퀄리티를 향상 시킬 수 있다.
ESLint 적용과 사용방법
1) ESLint설치
npm install eslint --save-dev
* 단 vue create 명령어를 통해 프로젝트 생성시 eslint를 같이 설치했다면 따로 설치 하지 않아도 된다.
2) ESlint 설정 파일 생성
npx eslint --init
npx eslint --init 명령어를 입력하면 위와 같은 선택지가 나오는데 여기서 본인 환경에 맞게 선택해주면 된다.
이렇게 하면 root 경로에 .eslintrc.js 파일이 생성된다. (위 선택지에서 .js를 선택해서 그럼.. JSON으로 선택해도 됨..)
3) ESLint 확장팩 설치 및 사용
VSCode의 Extension탭에서 ESLint를 검색하여 설치 및 Enable로 전환한다.
(확장팩 설치 안하면 오류가 있는 코드에 표시(flag)가 달리지 않는다.)
4) .eslintrc.js 파일 수정
module.exports = {
env: {
//env: environment의 약자로, Lint를 적용한 JS파일이 어떤 환경에서 실행되는지 정의 하는 옵션이다.
browser: true,
es2021: true,
},
//extends: 각 기업이 공개한 Lint 설정을 설치 및 적용하여 사용함. 가장 많이 쓰이는 Aribnb와 google, facebook등이 있음
extends: ["eslint:recommended", "plugin:vue/essential"],
parserOptions: {
ecmaVersion: 12,
sourceType: "module",
},
//plugins: ESLint에서 기본적으로 제공되는 규칙외에도 추가적인 규칙을 사용할 수 있도록 함 ex) vue 플러그인 사용시 Vue에 관련 된 규칙이 적용됨
//단, 플러그인을 추가했다고 해도 추가로 사용 할 룰은 따로 추가해줘야함
plugins: ["vue"],
rules: {
//rules: 규칙 하나하나를 작성 -> extends옵션에서 가져온 규칙들을 덮어씀
"no-undef": "warn", // 선언되지 않은 함수 또는 변수 사용시 warn
"no-unused-vars": "warn", // 선언되었으나 사용하지 않은 함수 또는 변수가 있을 시 error
},
};
위는 샘플코드이다. --init 명령어를 통해 기본적으로 세팅되는 .eslintrc.js 파일에
no-undef, no-unused-vars 규칙만 추가해주었다.
각 규칙에 대한 참조문서는 아래에서 확인하도록 하자.
기본 javascirpt rules 옵션 참조링크 :: https://eslint.org/docs/latest/rules/
Rules Reference - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
eslint.org
플러그인을 통해 추가한 Vue 옵션 참조링크 :: https://eslint.vuejs.org/rules/no-unused-vars.html
vue/no-unused-vars | eslint-plugin-vue
eslint.vuejs.org
5) 샘플코드 작성 및 결과 확인
.js파일을 위와 같이 작성하면 .eslintrc.js파일에서 설정한대로 에러(error) 또는 경고(warn)이 표시(flag)된다.
.vue 같은 경우에도 plugins에 ['vue']를 추가했고, extends에도 ['plugin:vue/essential']이 추가 되었기 때문에
적용이 된다.
나는 따로 .eslintrc.js에서 규칙을 설정해주지 않았기 때문에 에러(error)가 표출되는 것을 확인 할 수 있다.
여기서 component name을 'Sample-component'와 같이 변경해주면 에러가 사라진다.
해보면 딱히 어려운 거 없다. 그냥 확장팩 설치하고 eslint 설치하고 설정 파일에서
자신이 원하는 규칙을 추가만 해주면 된다.
추천하는건 사람들이 가장 많이 쓰는(이유가 있겠지?) Airbnb extends를 설치하고,
개발환경에 맞는 규칙들을 조금씩 추가해주면 될 것 같다. 끝
