ESLint๋ JS ์ปค๋ฎค๋ํฐ์์ ๋ง์ ๊ด์ฌ์ ๋ฐ์์ต๋๋ค. eslint ๋ก์ ๋ง์ด๊ทธ๋ ์ด์ ์ ํ์ํ ๊น์?
๋๊ตฐ๊ฐ? ๋๋ ํ์ ์ ์ง์ ๋ง์กฑํฉ๋๋ค. ESLint๋ ํ๋ฅญํ์ง๋ง ๋ณ๊ฒฝ์ ํ์ ํ ํ์๊ฐ ์์ต๋๋ค (๊ทธ๋ฌ๋ฉด ๋๊ตฐ๊ฐ PR์์ ๋ณ๊ฒฝ์ _ ๋ง๋ค์ด์ผํฉ๋๋ค.) ๋๋ ์ด๊ฒ์ ํ ์ฃผ ๋์ ์ด์ด๋๊ณ ์๋ฌด ์กฐ์น๊ฐ ์์ผ๋ฉด ๋ง๊ฐํ๊ฒ ์ต๋๋ค.
๋๋ ์ด๊ฒ์ ์ํด PR ํ ์์๋ค. ESLint๋ ์๋ฐ ์คํฌ๋ฆฝํธ ์ํ๊ณ์์ ๊ฐ์ฅ ๋๋ฆฌ ์ฌ์ฉ๋๋ ๋๊ตฌ ์ค ํ๋์ ๋๋ค.
@roblarsen ๋๋ ์ด๊ฒ์ ๋ํด @amilajack ์ ํธ์ ์์ ํ ์์ต๋๋ค.
๋ด๊ฐ๋ณด๊ณ ์ถ๋ค๋ฉด ์น์์ ์์ง ํ ๋ฐ์ดํฐ์ ๋์ ๊ฐ๋จํ ๋น๊ตํ์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค. ์ ๋ง ๋๋จํ ์ผ์ ๋๋ค. ๋ค๋ฅธ ์ฌ๋์ด ์ฐจ์ํ๊ณ ์ถ์ต๋๊น?
@amilajack PR ์ ์์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ์ ๋ง ๊ฐ์ฌํฉ๋๋ค.
@roblarsen ์ฒ๋ง ์์!
@amilajack ๋์์ด ํ์ํ๋ฉด ์ธ์ ๋ ์ง ๋ฉ์์ง๋ฅผ ๋ณด๋ด์ฃผ์ธ์. : construction_worker :
@amilajack ์์ง ์์ ์ค์ ๋๊น?
@ryzokuken ์ ๊ฐ ์ดํด๋ณด๊ณ
ESLint ์์ ์ถ๊ฐ ๋ Standard ์ ๊ฝค ์ธ๊ธฐ๊ฐ์๋
@ArmorDarks ๋ด๊ฐ ์คํ ๋ค๋ ์คํ์ผ์ ์ข์ํ์ง๋ง ๋ค๋ฅธ ์ฌ๋๋ค์ด ๊ทธ๊ฒ์ ๋ฐ๋ฅด๋๋ก ๊ฐ์ํ๋ ๊ฒ์ ์ข์ง ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ํนํ ๋ง์ ์ง์์ด๋ ๊ฒฝํ์ด์๋ ๊ฐ๋ฐ์๋ ์ฝ๋๋ก ์ธํด ์๊ธฐ์น ์์ ๋ฐํ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ณ ์ถ๊ฐ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ฌ ํ๋ก์ ํธ ๋ฌธ์ ๊ฐ ์ฆ๊ฐ ํ ์ ์์ต๋๋ค.
๋ด๊ฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ์ ์ฐ์ฑ์ ์ข์ํ๋๋งํผ ๊ทธ๋ฌํ ํน์ ์๋ ๋๊ฐ๊ฐ ๋ฐ๋ฆ ๋๋ค. ๋ฌธ์ ๋ ์ฐ๋ฆฌ๊ฐ ๊ทธ ๋๊ฐ๋ฅผ ์ง๋ถ ํ ์ํฅ์ด ์๋์ง ์ฌ๋ถ์ ๋๋ค. ์๊ฒฉํ ๊ท์น์ ๊ฑฐ์ ํญ์ ํ๋ก์ ํธ๊ฐ ์ฑ์ฅํ๋๋ผ๋ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ๊ฒฐ๊ณผ์ ์ผ๋ก ๋ ์์ ์ ์ผ๋ก ๋ง๋ญ๋๋ค.
๋ํ, ์ธ๋ฏธ์ฝ๋ก ์ด ์ธ๊ธฐ๋ฅผ ๋๋ฉด์ Airbnb์ JavaScript ์คํ์ผ ๊ฐ์ด๋๋ฅผ ์๋ก ๋ค์์ต๋๋ค. GitHub์์ ๊ฐ์ฅ ๋ณํ๋ฅผ๋ฐ์ ์ ์ฅ์ ์ค ํ๋์ด๊ณ NPM์์ ๋ค์ด๋ก๋ ์๊ฐ ๋ ๋ง์ต๋๋ค. [1] [2] [3] [4]
๋ํ ์ด๋ฏธ ์ธ๋ฏธ์ฝ๋ก ์ ์ฌ์ฉํ๊ณ ์๊ธฐ ๋๋ฌธ์ ๋ชจ๋ JavaScript ํ์ผ์ ์ ๋ฐ์ดํธํด์ผํฉ๋๋ค. [5] [6]
๋ฐ๋ผ์ ์ ๋์ด ์ฃผ์ ๊ฐ ์์ ๊ฑฐ ํ๋ฆด ๋งํ ๊ฐ์น๊ฐ ์๋ค๊ณ ์๊ฐํ์ง ์์ต๋๋ค.
[1] https://github.com/airbnb/javascript
[2] https://www.npmjs.com/package/eslint-config-airbnb-base
[3] https://www.npmjs.com/package/eslint-config-airbnb
[4] https://www.npmjs.com/package/eslint-config-standard
[5] https://github.com/h5bp/html5-boilerplate/blob/master/gulpfile.babel.js
[6] https://github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
์ด์จ๋ ์ฝ๋ ์คํ์ผ ๋ถ์์ผ๋ก ๊ท๊ฒฐ ๋ ๊ฒ์ ๋๋ค. ๋๋ ๋จ์ง ์ ํฌ ํ ์คํธ๋ฅผ ๊ฑฐ์น ๋์์ ์ ์ํ๊ณ ์์ต๋๋ค.
Btw, ์ด๋ค ์ต์ ์ ์ฌ์ฉํ๋ ์๊ด์์ด (ํ๋ก์ ํธ ์์ฒด ๊ท์น์ด์๋ ESLint์ด๋ , airbnb์ ๊ฐ์ ์ธ๊ธฐ์๋ ESLint ๊ตฌ์ฑ์ด๋ , ํ์ค์ด๋ ) _ ์ด์จ๋ ์ฌ์ฉ์๊ฐ ๋ฐ๋ผ์ผ ํ ๋ฌด์ธ๊ฐ๋ฅผ ์ํ ํ ๊ฒ์ ๋๋ค _. ๋ฐ๋ผ์ ์ ํํ ๋ฌด์์ ์ํํ ์ง์ ๋ฌธ์ ์ ๋๋ค.
์ด ์์ ์์ ๋๋ ์ต์ํ์ ์ค๋จ์ผ๋ก eslint๋ก ์ ํํ๊ณ ์ถ์ต๋๋ค. ์ฌ๊ธฐ์๋ ์ต์ํ ์๋ก์ด ๊ท์น์ด ๋ฌด์์ด์ด์ผํ๋์ง์ ๋ํ ๋ ผ์์์ด ์ฐ๋ฆฌ๊ฐ ํ์ฌ ๊ฐ์ง๊ณ ์๋ ๊ธฐ์กด ๊ท์น์ ์์ ๋ ๊ฒ์ด ํฌํจ๋ฉ๋๋ค (์ด๊ฒ์ด eslint์ ๋ํ ๊ธฐ์กด PR์ด DOA ์ธ ์ด์ ์ ๋๋ค).
์๋ฅผ ๋ค์ด ์ ๋ ์ธ๋ฏธ์ฝ๋ก ์ธ๋์์ ์ฃฝ์ ๊ฒ์ ๋๋ค.
์ฐธ๊ณ ๋ก, ๊ท์น ์ธํธ์ ์ค์ ์๋น์๋ ๊ด๋ฆฌ์์ ์์ฌ์ ์ผ๋ก PR์ ๋ง๋ค๊ณ ์ค์ ๋ก ์ฝ๋๋ฅผ ํ
์คํธํ๋ ๋ชจ๋ ์ฌ๋์ผ๋ก ์ ํ๋ฉ๋๋ค. ์ฐ๋ฆฌ๋ dist์์ eslintrc
๋ฅผ ๋ฐฐ์กํ์ง ์์ ๊ฒ์
๋๋ค. ํ๋ก์ ํธ ์ธก๋ฉด์์ ์ง์ ํ ์ด์ ์ ์ฐ๋ฆฌ๊ฐ _ ํด๋ด ๊ณ _ ์ข์ ์น ๊ฐ๋ฐ์๊ฐ ์ด๋ค ๋ชจ์ต์ด์ด์ผํ๋์ง์ ๋ํ ์๊ฐ ๋ ์ ์๋ค๋ ๊ฒ์
๋๋ค.
์๋ฅผ ๋ค์ด ์ ๋ ์ธ๋ฏธ์ฝ๋ก ์ธ๋์์ ์ฃฝ์ ๊ฒ์ ๋๋ค.
๊ทธ๊ฒ์ ์ ๊ท์์ผ๋ก ๋ช ๋ฒ์ ์คํธ๋กํฌ์ ๋ถ๊ณผํฉ๋๋ค. ํ์ง๋ง ์ด๋ค ์ฌ๋๋ค์๊ฒ ์ฌ์ฉํ๋ ์ํ๋ ์ ๋ง ๊ณ ํต์ค๋ฌ์ด ์ฃผ์ ์ธ ๊ฒ ๊ฐ์ต๋๋ค ...
์ฐ๋ฆฌ๋ dist์ eslintrc๋ฅผ ์ ๊ณตํ์ง ์์ ๊ฒ์ ๋๋ค. ํ๋ก์ ํธ ์ธก๋ฉด์์ ์ง์ ํ ์ด์ ์ ์ฐ๋ฆฌ๊ฐ์ด๋ฅผ ์ํํ๊ณ ์ข์ ์น ๊ฐ๋ฐ์๊ฐ ์ด๋ค ๋ชจ์ต์ด์ด์ผํ๋์ง์ ๋ํ ์๊ฐ ๋ ์ ์๋ค๋ ๊ฒ์ ๋๋ค.
๊ทธ๋ฌ๋ ๋ค๋ฅธ ํ๋ก์ ํธ์ ํฌํจ๋ JS ์ฝ๋๋ ๋์ค์ ๋ฆฐํ
๋ ๊ฒ์ด๋ฉฐ ์ฌ๋๋ค์ ๊ท์น์ ๋ง๊ฒ ์์ ํ๊ฑฐ๋ HTML5Boilerplate ๊ท์น์ ์ฌ์ฉํด์ผํฉ๋๋ค. ์ด๊ฒ์ด JS๊ฐ ๊ฐ๋ฅํ ํ JS ์ปค๋ฎค๋ํฐ ํ์ค์ ๊ฐ๊น์ ์ผํ๋ ์ด์ ์ด๋ฉฐ, ๊ท์น๊ณผ ์ฝ๋ ์คํ์ผ์ ํ์ํ ๋ช ๊ฐ์ง ๋ณ๊ฒฝ์ ํผํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋ค์ง ๋ฌธ์ ๊ฐ๋์ง๋ ์์ต๋๋ค. Standard ๋ฐ ESLint์ --fix
๋ ๋์
๋ ๊ท์น ์ค๋ฅ์ ๋๋ถ๋ถ์ ์๋์ผ๋ก ์์ ํฉ๋๋ค.
์ง์ง ๋ฌธ์ ๋ JS ์ธ๊ณ์์ ์ปค๋ฎค๋ํฐ ํ์ค์ ๊ณ ๋ คํด์ผํ๋ ๊ฒ์ ๋๋ค.
์ข์ ์ . ์ฐ๋ฆฌ๊ฐ ์ ๊ณตํ๋ ์๋์ JS์กฐ์ฐจ๋ ๋ค์ด ์คํธ๋ฆผ ํจ๊ณผ๋ฅผ ์๊ธฐ์ํค๋ ๊ฒ์ด ์ข์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋ช ํํํ๊ธฐ ์ํด ์ ๋ ๋ณํ๋ฅผ ๋ฐ๋ํ์ง ์์ต๋๋ค. ๋ด๊ฐํ๊ณ ์ถ์ง ์์ ๊ฒ์ ํ ๋ก ์์ด ์ ์ฒด์ ์ผ๋ก ๋ณ๊ฒฝํ๋ ๊ฒ์ ๋๋ค (ํ ๋ก ์ ์ฐธ์ฌํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค ๐) ์ง๊ธ ๋น์ฅ 6.0์ ๊ณต๊ฐํ๋ ๊ฒ์ด ์ ์คํ์ง๋ง ์ผ๋ฐ์ ์ผ๋ก ๋ณ๊ฒฝ์ ์๋๋ฅด์ง ์์ต๋๋ค ์ฌ๊ธฐ์ ๊ทธ๋ค์ด ์ฌ๋ฐ๋ฅธ ๋ณํ๊ฐ ์๋๋ผ๋ฉด.
ํ ๊ฐ์ง ์ต์
์ ์ผ๋ฐ์ ์ธ ๋ฌธ์ ๋ฅผ๋ณด๊ณ ํ์ง๋ง ์คํ์ผ ์ ํธ๋๋ฅผ ์ค์ ๋ก ๋ถ๊ณผํ์ง๋ ์๋ eslint:recommended
๊ตฌ์ฑ ์ ์ ์ฉํ๋ ๊ฒ์
๋๋ค. ์ด ๊ฒฝ์ฐ ESLint๋ ์ค๋ฅ์ ๋ฒ๊ทธ๋ฅผ ๋ฐฉ์งํ๋ ์ญํ ๋งํฉ๋๋ค. ์ค์ ๋ก๋ ์ต์ํ์ ์์์ ์ธ ๊ตฌ์ฑ์
๋๋ค.
์ด ๊ฒฝ์ฐ์ ์ถ๊ฐ ํ ์ ์ผํ ์คํ์ผ ๊ด๋ จ ๊ท์น์ .editorconfig
๊ท์น์
๋๋ค : ํํ ๊ณต๋ฐฑ ์์, 4 ๊ฐ์ ๊ณต๋ฐฑ ๋ค์ฌ ์ฐ๊ธฐ ๋ฐ ๋ง์ง๋ง ์ค ๋ฐ๊ฟ.
4 ์นธ ๋ค์ฌ ์ฐ๊ธฐ
์ ๋ณด๋ฅผ ์ํด ๋ ์ด์ 4 ๊ฐ์ ๊ณต๋ฐฑ์ ์ฌ์ฉํ๋ ์ธ๊ธฐ์๋ ์ฝ๋ ์คํ์ผ์ด ์์ต๋๋ค.
https://github.com/h5bp/html5-boilerplate/issues/1913#issuecomment -377298563 (eslint : recommend) ์ข์ ๊ฒ ๊ฐ์ง๋ง ๊ฐ์ธ์ ์ผ๋ก https://github.com/h5bp/html5-boilerplate/๋ฅผ ์ ํธํฉ๋๋ค.
๋๋ด : https://github.com/christophwitzko/semicolon-indent#semicolon -indent
์ ๋ Standard์ ํจ๊ป ์์ต๋๋ค. ์๋ํ๋ฉด ๊ทธ๋ค์ ์ปค๋ฎค๋ํฐ๋ฅผ ํตํ ๊ฒ์ฆ์ ํตํด ์ข์ ๊ตฌ์ฑ์ ์ ์งํ ๋ฟ๋ง ์๋๋ผ ESLint ์์ ์ฐ์ํ ํ ์คํธ ์ถ๊ฐ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
๊ทธ๋ฌ๋ ๊ณต์ ํ๊ฒ ๋งํ๋ฉด Prettier ๋ ์ธ๊ธํด์ผํฉ๋๋ค. ํ์ง๋ง ๋ด ํฌํ๋ ์ฌ์ ํ ์คํ ๋ค๋๋ฅผ์ง์งํฉ๋๋ค.
๋ ผ์์ ์๋ถ๋ถ์์ ์๋ฆผ
์๋ฅผ ๋ค์ด ์ ๋ ์ธ๋ฏธ์ฝ๋ก ์ธ๋์์ ์ฃฝ์ ๊ฒ์ ๋๋ค.
๊ทธ๊ฒ์ด ์ด์๋จ์ ๊ฒ์์ด๋ผ๊ณ ์์ํด๋ณด์ญ์์ค. ์ฐ๋ฆฌ๊ฐ 2005 ๋ ์ ํญ๊ณผ ์คํ์ด์ค๋ฅผ ๊ฒฐ์ ํ๋ ๊ฒ์ฒ๋ผ ๋ง์ ๋๋ค.
Btw, Prettier์ ๋ํด ์ธ๊ธ ํ ๊ฐ์น๊ฐ ์์ต๋๋ค. ๋๋ถ๋ถ์ Prettier๊ฐ ์ ์งํ๋ ์ฝ๋ ์คํ์ผ์ ๋๋ถ๋ถ ์ฝ๋ ์คํ์ผ์ด๊ณ ESLint ๊ตฌ์ฑ (ํนํ Standard ๊ตฌ์ฑ)์ ๋น์คํ ์ผ์ ์ข์ ๋๋ ๋์ ์ฌ๋ก๋ ๋ง์ด ๋ค๋ฃจ๊ธฐ ๋๋ฌธ์ ์ข์ ESLint ๊ตฌ์ฑ๊ณผ ํจ๊ป ์ฌ์ฉํด์ผํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ฐ์ฌํฉ๋๋ค. ์ ๋ง ๋๋จํ ์ผ์ ๋๋ค. ๋ค๋ฅธ ์ฌ๋์ด ์ฐจ์ํ๊ณ ์ถ์ต๋๊น?
@amilajack PR ์ ์์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ์ ๋ง ๊ฐ์ฌํฉ๋๋ค.