<div id="readability-page-1" class="page"><article data-astro-cid-4eu74nwj=""> <header data-astro-cid-4eu74nwj=""> <h2 data-astro-cid-4eu74nwj="">2019년을 끝으로 TSLint 개발은 끝난다.</h2> <a href="/blog/tags/typescript-tslint-eslint" data-astro-cid-4eu74nwj="">typescript, </a><a href="/blog/tags/typescript-tslint-eslint" data-astro-cid-4eu74nwj="">tslint, </a><a href="/blog/tags/typescript-tslint-eslint" data-astro-cid-4eu74nwj="">eslint</a> <time datetime="2019-12-05" data-astro-cid-4eu74nwj="">2019-12-05</time> </header> <hr data-astro-cid-4eu74nwj=""> <section data-astro-cid-4eu74nwj=""> <h2 id="tslint는-2019년이-끝">TSLint는 2019년이 끝</h2>
<blockquote>
TSLint will be deprecated some time in 2019.
</blockquote>
올해 초부터 공표했듯이 TSLint는 2019년을 끝으로 더는 사용되지 않는다.
마이그레이션은 꽤 귀찮은 일이지만 피할 수 없기에 12월이 되었으니 다시금 ESLint로 돌아가야 할 때가 된 것 같다.
<a href="https://github.com/typescript-eslint/tslint-to-eslint-config" rel="noopener noreferrer" target="_blank">tslint-to-eslint-config</a>를 사용하면 마이그레이션을 할 수 있지만, 어차피 설정을 조금이라도 고쳐야 하고 한동안 안 써서 혹시나 변경되거나 추가된 API가 있을까 봐 TSLint를 지우고 ESLint를 설치했다.
<h2 id="migration">Migration</h2>
먼저 TSLint 설정파일과 TSLint와 관련된 패키지는 모두 삭제 후 ESLint를 설치한다.
다음으로 ESLint 설정파일을 생성해주는 커맨드를 실행한다.
<pre tabindex="0" data-language="bash"><code>$ npm install -g eslint
$ eslint --init</code></pre>
VSCode를 주로 사용하는지라 IDE에서 linting 하려면 전역으로 설치해야 한다.
만약 프로젝트에서 실행하려면 아래와 같이 설치 후 실행하면 된다.
<pre tabindex="0" data-language="bash"><code>$ npm install --save-dev eslint
$ ./node_modules/.bin/eslint --init</code></pre>
그것도 아니라면 일회성으로 전역에서 실행시켜주는 npx를 사용하면 된다.
<pre tabindex="0" data-language="bash"><code>$ npx eslint --init</code></pre>
여러 질문을 거쳐 입맛에 맞게 생성된 초기 설정은 아래와 같다. (eslint 6.7.2)
<pre tabindex="0" data-language="json"><code>{
 "env": {
 "browser": true,
 "es6": true
 },
 "extends": [
 "plugin:react/recommended",
 "airbnb"
 ],
 "globals": {
 "Atomics": "readonly",
 "SharedArrayBuffer": "readonly"
 },
 "parser": "@typescript-eslint/parser",
 "parserOptions": {
 "ecmaFeatures": {
 "jsx": true
 },
 "ecmaVersion": 2018,
 "sourceType": "module"
 },
 "plugins": [
 "react",
 "@typescript-eslint"
 ],
 "rules": {
 }
}</code></pre>
과정의 마지막에 관련 패키지 설치를 묻는데 설치하도록 하자.
하지만 prettier는 포함이 안 되어 있는 관계로 prettier와 eslint를 위한 패키지들을 설치 후
<pre tabindex="0" data-language="bash"><code>$ npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier</code></pre>
아래 설정을 추가하면 된다.
<pre tabindex="0" data-language="json"><code>{
 ...
 "extends": [
 ...
 "prettier/@typescript-eslint",
 "plugin:prettier/recommended"
 ],
 ...
}</code></pre>
<h2 id="eslint">ESLint</h2>
여기까지 한 뒤 파일을 linting 해보니 난리가 나 있었다.
이제부터는 룰을 하나씩 잡아야했었는데 나의 최종 초기값은 아래와 같다.
<pre tabindex="0" data-language="json"><code>{
 "env": {
 "browser": true,
 "es6": true
 },
 "extends": [
 "plugin:react/recommended",
 "plugin:@typescript-eslint/recommended",
 "airbnb",
 "plugin:import/errors",
 "plugin:import/warnings",
 "plugin:import/typescript",
 "prettier/@typescript-eslint",
 "plugin:prettier/recommended"
 ],
 "globals": {
 "Atomics": "readonly",
 "SharedArrayBuffer": "readonly"
 },
 "parser": "@typescript-eslint/parser",
 "parserOptions": {
 "ecmaFeatures": {
 "jsx": true
 },
 "ecmaVersion": 2018,
 "sourceType": "module"
 },
 "plugins": ["react", "@typescript-eslint"],
 "rules": {
 "react/jsx-filename-extension": [
 2,
 { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
 ],
 "react/prop-types": 0,
 "react/state-in-constructor": 0
 }
}</code></pre>
<h2 id="마치며">마치며</h2>
lint가 필수는 아니지만, 지금까지 lint를 사용함으로써 얻는 장점이 더 크다고 생각한다. 1인 개발이든 팀 개발이든 lint를 사용하여 더욱 높은 가독성과 여러 오류에서 벗어나는 게 좋지 않을까? (물론 다른 의견도 환영) </section> </article></div>

lannex

Shin, SJ

2019년을 끝으로 TSLint 개발은 끝난다.

TSLint에서 ESLint로

댓글