개요
프로그래밍을 하다보면 종종 오탈자때문에 에러가 발생하곤합니다. 또한 비슷한 오탈자는 잘 찾을 수 없어 시간을 많이 낭비하기도 합니다. 이번 블로그 포스트에서는 CSpell을 통해 오탈자를 검사하는 방법에 대해서 알아보도록 하겠습니다.
여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.
Node 설치
CSpell를 사용하기 위해서는 Node를 설치할 필요가 있습니다. 각각의 OS에 맞게 Node를 설치합니다.
macOS
Homebrew는 맥에서 패키지를 설치하고 관리할 수 있는 맥용 패키지 관리자입니다. Homebrew를 통해 맥에 필요한 패키지를 간단하게 설치할 수 있다. 다음 명령어를 실행하여 Homebrew를 설치합니다.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
설치가 완료되었다면, 다음 명령어를 실행하여 잘 설치되었는지 확인합니다.
brew --version
만약 버전이 표시되지 않는다면, 터미널을 종료하고, 다시 실행시킵니다. 이미 Homebrew가 설치된 분들은 다음 명령어를 실행하여 Node를 설치합니다.
brew install node
Windows
윈도우에는 Chocolatey라는 패키지 매니저를 사용합니다. 관리자 권한으로 실행된 명령어 프롬프트 또는 파워쉘을 열고 다음 명령어를 실행하여 Chocolatey를 설치합니다.
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
설치가 완료되었다면, 다음 명령어를 실행하여, 설치가 잘 되었는지 확인합니다.
choco –version
Chocolatey의 버전이 표시되지 않는다면, 명령어 프롬프트 또는 파워쉘을 종료하고 다시 실행시킵니다. Chocolatey가 설치되었다면, 다음 명령어를 실행하여 Node를 설치합니다.
choco install -y nodejs.install
package.json 생성
CSpell는 Node 개발 환경에서 동작합니다. 따라서 노드 패키지를 관리하기 위해 package.json 파일을 생성할 필요가 있습니다. 다음 명령어를 사용하여 package.json 파일을 생성합니다.
npm init
명령어를 실행하면 다음과 같이 여러 질문들이 나옵니다. 특별히 변경하고 싶은 내용이 없다면 모든 질문에 Enter키를 입력합니다.
package name: (cspell-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
그럼 다음과 같이 package.json 파일이 생성되는 것을 확인할 수 있습니다.
{
"name": "cspell-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
CSpell 설치
이제 다음 명령어를 사용하여 CSpell를 설치합니다.
npm install --save-dev cspell
실행 스크립트 생성
설치한 CSpell을 사용하기 위해, 실행하는 스크립트를 생성해 봅시다. package.json 파일을 열고 다음과 같이 수정합니다.
{
...
"scripts": {
"check:spell": "cspell '**' --gitignore --no-progress "
},
...
}
CSpell을 사용하여 모든 파일(**)을 검사할 예정이며, --gitignore 옵션을 사용하여 .gitignore에 설정된 파일들은 검사하지 않도록 하였습니다. 또한, --no-progress 옵션을 사용하여 검사하고 있는 상태를 표시하지 않도록 하였습니다.
실행
다음으로 CSpell가 잘 동작하는지 확인하기 위해 index.js 파일을 생성하고 다음과 같이 수정합니다.
function template() {
console.log('deku');
}
그런 다음, 다음 명령어를 실행하여, CSpell가 잘 실행되는지 확인해 봅니다.
npm run check:spell
CSpell가 잘 동작하였다면, 다음과 같은 경고를 확인할 수 있습니다.
/study-linters/cspell-example/index.js:2:16 - Unknown word (templete)
CSpell: Files checked: 2, Issues found: 1 in 1 files
특정 단어 제외
특정 단어를 CSpell이 오탈자로 검사하지 않도록 하고 싶다면, 사전을 생성하고 등록할 필요가 있습니다. .cspell.json 파일을 생성하고 다음과 같이 오탈자 검사에서 제외하고 싶은 단어들을 등록합니다.
{
"words": ["deku"]
}
그런 다음, 다음 명령어를 다시 실행하여 CSpell로 오탈자를 검사해 봅니다.
npm run check:spell
이전과는 다르게 사전에 등록된 단어가 오탈자 검사 결과에 표시되지 않는 것을 확인할 수 있습니다.
CSpell: Files checked: 2, Issues found: 0 in 0 files
특정 파일 포멧 제외
빌드 결과나 스냅샷 테스트와 같이 특정 파일들을 CSpell의 오탈자 검사에서 제외할 수 있습니다. 특정 파일 포멧을 제외시키기 위해 .cspell.json 파일을 열고 다음과 같이 수정합니다.
{
"words": ["deku"],
"ignorePaths": ["*.snap"]
}
이제 스냅샷 결과 파일인 .snap 파일은 CSpell 검사에서 제외되었습니다.
완료
이것으로 CSpell를 사용하여 오탈자를 검사하는 방법에 대해 알아보았습니다. CSpell을 사용하여 모든 오탈자를 찾아낼 수는 없지만, 오탈자에 의한 문제를 조금이나마 해결할 수 있으니 여러분도 한번 사용해 보시기 바랍니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
![[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통](https://img1c.coupangcdn.com/image/affiliate/banner/7cba8cb0601eebaf88a17a0c3cf65a63@2x.jpg)