<div id="readability-page-1" class="page"><div>
                  <p><a href="/m/category/Frontend%20DevOps/Frontend-tooling"><span>Frontend DevOps/Frontend-tooling</span></a></p><h3>환경 구성 (1) : lint: estlint, stylelint, formatter: prettier</h3>
                </div><p><cite>DarrenKwonDev</cite>
                  <span> 2021. 12. 17. 16:50</span>
                </p><div>
                                <p data-ke-size="size16"><b>lint와 formatter는 무엇이 다른가.</b></p>
<p data-ke-size="size16"><a href="https://prettier.io/docs/en/comparison.html" target="_blank" rel="noopener">https://prettier.io/docs/en/comparison.html</a></p>


<h4 data-ke-size="size20"><b>1. <a href="https://eslint.org/" target="_blank" rel="noopener">eslint</a> 설정</b></h4>
<pre id="code_1639726380377" data-ke-language="javascript" data-ke-type="codeblock"><code>npm install eslint --save-dev</code></pre>

<p data-ke-size="size16"><b>- extends와 plugins는 무슨 차이인가?</b></p>
<p data-ke-size="size16">plugin은 eslint에 추가적인 속성을 부여하는 것이다. 예를 들어 react의 훅에 적용되는 규칙을 위해서 eslint-plugin-react-hooks을 설치하고 plugin에 등록한 뒤 react-hooks/exhaustive-deps 룰을 적용하는 것이 plugin을 사용하는 일반적인 흐름이다.</p>
<p data-ke-size="size16">반면 extends는 plugin 등을 설치하였을 때 추가되는 각종 rule들을 하나하나 수작업으로 설정하기보다는 recommended된 옵션을 넣어서 패키지를 제작한 사람이 추천하는 rule을 그대로 사용할 수도 있다.</p>

<p data-ke-size="size16"><b>- 개발과 동시에 린트 검사를 활성화하기 위한 webpack plugin 설정</b></p>
<pre id="code_1639724436332" data-ke-language="javascript" data-ke-type="codeblock"><code>const ESLintPlugin = require('eslint-webpack-plugin')

// webpack plugins
[
  new ESLintPlugin({
   useEslintrc: true,
  }),
]</code></pre>


<p data-ke-size="size16">- prettier와의 충돌 방지를 위한 <a href="https://github.com/prettier/eslint-plugin-prettier" target="_blank" rel="noopener">eslint-plugin-prettier</a></p>



<h4 data-ke-size="size20"><b>2. <a href="https://prettier.io/" target="_blank" rel="noopener">prettier</a> 설정</b></h4>
<pre id="code_1639726469908" data-ke-language="javascript" data-ke-type="codeblock"><code>npm install prettier --save-dev</code></pre>
<p data-ke-size="size16">- <a href="https://www.npmjs.com/package/eslint-plugin-import" target="_blank" rel="noopener">eslint-plugin-import</a> vs <a href="https://www.npmjs.com/package/@trivago/prettier-plugin-sort-imports" target="_blank" rel="noopener">prettier-plugin-sort-imports</a></p>
<p data-ke-size="size16">import 순서를 조정하기 위한 두 방법이 존재한다. 전자는 eslint를 통해서 import 순서를 조정하는 것이다. 후자는 trivago에서 만든 prettier plugin을 설치하여 formatter를 통해서 소팅하는 방법이다. prettier-plugin을 통한 순서 조정은 정규식을 통해서 순서 조정을 할 수 있기 때문에 좀 더 자세하게 다룰 수 있지만, 간단히 정리하는 용으로는 eslint를 사용하는 방법이 합리적입니다.</p>

<p data-ke-size="size16">현재 typed에서는 eslint-plugin-import를 통해 import 순서를 조정 중입니다. 너무 세세한 규칙보다는 작업자의 자율성을 지키면서도 builtin, external만 상단에 위치하도록 그루핑하도록 설정했습니다.</p>
<pre id="code_1639725269388" data-ke-language="javascript" data-ke-type="codeblock"><code>'import/order': [
  'error',
   {
      groups: [
        ['builtin', 'external'],
        ['index', 'sibling', 'parent', 'internal', 'object', 'type'],
      ],
    },
 ],</code></pre>


<h4 data-ke-size="size20"><b>3. <a href="https://stylelint.io/" target="_blank" rel="noopener">stylelint</a> 설정 (14버전)</b></h4>

<pre id="code_1639724585389" data-ke-language="javascript" data-ke-type="codeblock"><code>npm install --save-dev stylelint stylelint-config-standard

// css-in-js를 사용할 경우
npm install postcss-syntax @stylelint/postcss-css-in-js --save-dev</code></pre>
<pre id="code_1639724196035" data-ke-language="javascript" data-ke-type="codeblock"><code>{
  "plugins": ["stylelint-order"],
  "customSyntax": "@stylelint/postcss-css-in-js", // css-in-js를 위하여 설정
  "rules": {
    "alpha-value-notation": "percentage",
    "order/properties-order": [
      {
        "groupName": "all",
        "properties": ["all"]
      },
      {
        "groupName": "displays",
        "properties": ["display"]
      },
      ... omitted
   ]
}</code></pre>


<h4 data-ke-size="size20"><b>4. lint, formatter 이후 script 구동</b></h4>

<p data-ke-size="size16">husky + lint-staged 조합을 활용하여 precommit 시점에 git에 잡힌 파일들을 대상으로 처리하도록하자.</p>
<pre id="code_1639727771842" data-ke-language="javascript" data-ke-type="codeblock"><code>"lint": "run-s lint:prettier lint:eslint",
"lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
"lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",

"fix": "run-s fix:eslint fix:prettier",
"fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
"fix:eslint": "eslint . --format stylish --fix",

"npm run lint:eslint -- --rule 'no-console: [2, { allow: [warn, error, debug] }]' --fix",
"npm run lint:stylelint -- --fix",
"prettier --loglevel warn --write"</code></pre>


<p data-ke-size="size16">ref)</p>
<p data-ke-size="size16"><a href="https://velog.io/@kyusung/eslint-config-2" target="_blank" rel="noopener">https://velog.io/@kyusung/eslint-config-2</a></p>
<p data-ke-size="size16"><a href="https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/" target="_blank" rel="noopener">https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/</a></p>

            
            
                </div></div>

HotHandCoding

DarrenKwon

lint와 formatter는 무엇이 다른가.
https://prettier.io/docs/en/comparison.html
 
 
1. eslint 설정
npm install eslint --save-dev
 
- extends와 plugins는 무슨 차이인가?
plugin은 eslint에 추가적인 속성을 부여하는 것이다. 예를 들어 react의 훅에 적용되는 규칙을 위해서 eslint-plugin-react-hooks을 설치하고 plugin에 등록한 뒤 react-hooks/exhaustive-deps 룰을 적용하는 것이 plugin을 사용하는 일반적인 흐름이다.
반면 extends는 plugin 등을 설치하였을 때 추가되는 각종 rule들을 하나하나 수작업으로 설정하기보다는 recommended된 옵션을 넣어서 패키지를 제작한 사람이 추천하는 rule을 그대로 사용할 수도 있다.
 
- 개발과 동시에 린트 검사를 활성화하기 위한 webpack plugin 설정
const ESLintPlugin = require('eslint-webpack-plugin')
// webpack plugins
[
  new ESLintPlugin({
   useEslintrc: true,
  }),
]
 
 
- prettier와의 충돌 방지를 위한 eslint-plugin-prettier
 
 
 
2. prettier 설정
npm install prettier --save-dev
- eslint-plugin-import vs prettier-plugin-sort-imports
import 순서를 조정하기 위한 두 방법이 존재한다. 전자는 eslint를 통해서 import 순서를 조정하는 것이다. 후자는 trivago에서 만든 prettier plugin을 설치하여 formatter를 통해서 소팅하는 방법이다. prettier-plugin을 통한 순서 조정은 정규식을 통해서 순서 조정을 할 수 있기 때문에 좀 더 자세하게 다룰 수 있지만, 간단히 정리하는 용으로는 eslint를 사용하는 방법이 합리적입니다.
 
현재 typed에서는 eslint-plugin-import를 통해 import 순서를 조정 중입니다. 너무 세세한 규칙보다는 작업자의 자율성을 지키면서도 builtin, external만 상단에 위치하도록 그루핑하도록 설정했습니다.
'import/order': [
  'error',
   {
      groups: [
        ['builtin', 'external'],
        ['index', 'sibling', 'parent', 'internal', 'object', 'type'],
      ],
    },
 ],
 
 
3. stylelint 설정 (14버전)
 
npm install --save-dev stylelint stylelint-config-standard
// css-in-js를 사용할 경우
npm install postcss-syntax @stylelint/postcss-css-in-js --save-dev
{
  "plugins": ["stylelint-order"],
  "customSyntax": "@stylelint/postcss-css-in-js", // css-in-js를 위하여 설정
  "rules": {
    "alpha-value-notation": "percentage",
    "order/properties-order": [
      {
        "groupName": "all",
        "properties": ["all"]
      },
      {
        "groupName": "displays",
        "properties": ["display"]
      },
      ... omitted
   ]
}
 
 
4. lint, formatter 이후 script 구동
 
husky + lint-staged 조합을 활용하여 precommit 시점에 git에 잡힌 파일들을 대상으로 처리하도록하자.
"lint": "run-s lint:prettier lint:eslint",
"lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
"lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
"fix": "run-s fix:eslint fix:prettier",
"fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
"fix:eslint": "eslint . --format stylish --fix",
"npm run lint:eslint -- --rule 'no-console: [2, { allow: [warn, error, debug] }]' --fix",
"npm run lint:stylelint -- --fix",
"prettier --loglevel warn --write"
 
 
ref)
https://velog.io/@kyusung/eslint-config-2
https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/

환경 구성 (1) : lint: estlint, stylelint, formatter: prettier

댓글