프로젝트를 진행하며, 리액트와 타입스크립트를 사용하는 프로젝트에 eslint와 prettier 를 세팅하는 방법을 정리하려 한다
1. 아래의 코드를 터미널에 입력하여 CRA (create-react-app) 로 타입스크립트 기반의 리액트 프로젝트를 생성한다
npx create-react-app 프로젝트폴더명 --template typescript
2. 터미널에 'cd 프로젝트폴더명' 을 입력하여 프로젝트 폴더로 이동하여 아래와 같이 eslint 라이브러리를 설치한다 (npm 말고 yarn 쓰자 npm 별로당)
yarn add eslint
3. 프로젝트 폴더 내 최상위 경로에(package.json 과 같은 레벨) '.eslintrc.js' 파일을 생성하고 아래의 코드를 붙여넣어주자
module.exports = {
root: true,
env: {
es6: true,
node: true,
browser: true,
},
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaFeatures: { jsx: true },
jsx: true,
useJSXTextNode: true,
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"eslint-config-prettier",
"plugin:react/recommended",
],
plugins: ["@typescript-eslint", "import", "prettier", "react", "react-hooks"],
settings: { react: { version: "detect" } },
rules: {
"prettier/prettier": ["error", { endOfLine: "auto" }],
"no-implicit-coercion": "error",
"no-undef": "off",
indent: "off",
"@typescript-eslint/indent": "off",
semi: "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-explicit-any": "off",
"no-extra-boolean-cast": "off",
"getter-return": "warn",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/no-empty-interface": "off",
"@typescript-eslint/no-parameter-properties": "off",
"no-restricted-imports": [
"error",
{
paths: [
{
name: "util",
importNames: ["isArray"],
message: "`Array.isArray`를 대신 사용해주세요!",
},
],
},
],
"no-async-promise-executor": "warn",
"@typescript-eslint/prefer-as-const": "warn",
"@typescript-eslint/no-non-null-asserted-optional-chain": "warn",
"@typescript-eslint/ban-types": "warn",
"@typescript-eslint/no-inferrable-types": "warn",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/naming-convention": [
"error",
{
format: ["camelCase", "UPPER_CASE", "PascalCase"],
selector: "variable",
leadingUnderscore: "allow",
},
{ format: ["camelCase", "PascalCase"], selector: "function" },
{ format: ["PascalCase"], selector: "interface" },
{ format: ["PascalCase"], selector: "typeAlias" },
],
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/array-type": ["error", { default: "array-simple" }],
"@typescript-eslint/no-unused-vars": ["warn", { ignoreRestSiblings: true }],
"@typescript-eslint/member-ordering": [
"error",
{
default: [
"public-static-field",
"private-static-field",
"public-instance-field",
"private-instance-field",
"public-constructor",
"private-constructor",
"public-instance-method",
"private-instance-method",
],
},
],
"no-warning-comments": [
"warn",
{
terms: ["TODO", "FIXME", "XXX", "BUG"],
location: "anywhere",
},
],
"prefer-const": "error",
"no-var": "error",
curly: ["error", "all"],
eqeqeq: ["error", "always", { null: "ignore" }],
"import/no-duplicates": "error",
"react/prop-types": "off",
"react/display-name": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "error",
"react/jsx-no-target-blank": "error",
"@typescript-eslint/no-var-requires": "warn",
"react/react-in-jsx-scope": "off",
},
};
4. 터미널에 아래의 코드를 복붙해서 입력해준다 (prettier 와 통합하기 위한 라이브러리 모음 설치)
yarn add -D eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-jsx-a11y
5. 프로젝트 폴더 내 최상위 경로에(package.json 과 같은 레벨) '.prettierrc' 파일을 생성하고(확장자 없음) 아래의 코드를 붙여넣어주자
{
"trailingComma": "all",
"printWidth": 80,
"useTabs": false,
"tabWidth": 2,
"singleQuote": false,
"bracketSpacing": true,
"semi": true,
"arrowParens": "always",
"endOfLine": "auto",
"jsxBracketSameLine": false,
"jsxSingleQuote": false
}
6. 프로젝트 폴더 내 최상위 경로에(package.json 과 같은 레벨) '.prettierignore' 파일과 '.eslintignore' 파일을 생성하고(확장자 없음) 두 파일에 모두 아래의 코드를 붙여넣어주자. 파일이 휑해도 그냥 저것만 쓰면 된당
node_modules
7. '.eslintrc.js' 파일에서 rules 의 prettier 값을 아래와 같이 수정해주자.(저부분만 수정해주자)-버전에러 방지용임
rules: {
"prettier/prettier": ["error", { "endOfLine": "auto" }],
},
8. 이제 eslint 와 prettier 가 제대로 설치되었다! 원하는 라이브러리를 추가로 설치해서 happy 한 프로젝트를 시작하자!
댓글