ESLint란?
SLint는 JavaScript와 JSX 코드에서 문제를 찾아주는 정적 코드 분석 도구입니다.
일관된 코딩 스타일을 유지하고, 코드 품질을 향상시키며, 버그를 예방하는 데 도움이 됩니다.
Vue 프로젝트에서도 ESLint를 적용하여 이러한 이점을 누릴 수 있습니다.
ESLint 설치하기
먼저, Vue 프로젝트를 생성합니다. Vue CLI를 사용하여 새로운 프로젝트를 생성할 수 있습니다.
vue create my-vue-project
프로젝트를 생성할 때 ESLint를 설정할 수 있는 옵션이 있습니다. 하지만 이미 생성된 프로젝트에 ESLint를 적용하려면 다음 명령어를 사용합니다.
npm install eslint
ESLint 설정하기
프로젝트에 ESLint를 추가하면 .eslintrc 파일이 생성됩니다. 이 파일에서 ESLint 설정을 관리할 수 있습니다. 기본 설정을 살펴보겠습니다.
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended', // TypeScript를 사용하는 경우
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
}ESLint 규칙 커스터마이징
기본 규칙 외에도 프로젝트에 맞게 ESLint 규칙을 커스터마이징할 수 있습니다.
예를 들어, 코드에서 세미콜론을 항상 사용하도록 설정하고 싶다면, rules 섹션에 다음을 추가합니다.
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'semi': ['error', 'always'], // 세미콜론 강제 사용
}ESLint 플러그인 추가하기
추가적인 플러그인을 사용하여 ESLint의 기능을 확장할 수 있습니다. 예를 들어, Prettier와 함께 사용하여 코드 포매팅을 자동화할 수 있습니다.
Prettier 플러그인을 설치하고 설정하는 방법은 다음과 같습니다.
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
.eslintrc 파일을 수정하여 Prettier 플러그인을 추가합니다.
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended', // TypeScript를 사용하는 경우
'plugin:prettier/recommended' // Prettier 추가
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'semi': ['error', 'always'], // 세미콜론 강제 사용
'prettier/prettier': 'error' // Prettier 오류 처리
},
}코드 검사 및 자동 수정
ESLint를 사용하여 코드를 검사하고 자동으로 수정할 수 있습니다. 다음 명령어를 사용하여 프로젝트의 코드를 검사합니다.
npm run lint
코드의 문제를 자동으로 수정하려면 다음 명령어를 사용합니다.
npm run lint --fix
예제 프로젝트
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
</style>이 예제에서는 ESLint가 코드 스타일을 검사하고, Prettier가 코드 포매팅을 관리합니다.
마무리
ESLint를 Vue 프로젝트에 적용하면 코드 품질을 높이고, 일관된 코딩 스타일을 유지하며, 개발 과정에서 발생할 수 있는 오류를 미리 예방할 수 있습니다.
이 글을 통해 ESLint를 설치하고 설정하는 방법을 이해하고, 프로젝트에 맞게 커스터마이징하는 방법을 배웠기를 바랍니다.
앞으로 더 효율적이고 깨끗한 코드를 작성하는 데 도움이 되길 바랍니다.
Leave a Reply