Reactjs 2일차

1. eslint

- VSC 터미널에서 실행

- 코드에 문제가 없는지 검출해주는 역할

npm i -D eslint

 

2. Prettier

- 코드 formatter

- 사이트: https://prettier.io/docs/en/install.html

Prettier · Opinionated Code Formatter

- VSC 터미널에서 실행

npm install --save-dev --save-exact prettier

 

3. VSC에서 package.json 체크.

"devDependencies": {
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "eslint": "^8.40.0",
    "html-webpack-plugin": "^5.5.1",
    "mini-css-extract-plugin": "^2.7.5",
    "prettier": "2.8.8",
    "terser-webpack-plugin": "^5.3.7",
    "webpack": "^5.82.0",
    "webpack-cli": "^5.0.2",
    "webpack-dev-server": "^4.13.3"
  }

 

** pretteir를 보면 다른 lib와 다르게 앞에 ^가 없다.

^ 는 (caret symbol) 이라하며

버전앞에 '^'가 있는 경우 npm install시  minor version이 있는 경우 해당 버전으로 업데이트 해준다는 것.

예를 들어 npm i - D(--save-dev의 옵션과 같다) eslint를 해준  eslint의 경우 지금 8.40.0 인데 8.41.x 버전으로 업데이트 해준다는 의미이다.

(9.X 버전으로는 올라가지 않는다.)prettier의 경우에는 --save-exact 라는 옵션을 통해 딱 이버전만 사용한다는 의미를 갖는다.prettier의 경우 버전마다 조금씩 formatting이 달라 버전을 정확히 맞춰서 써야한다.

 

4. eslint와 prettier를 함께 사용하기 위한 라이브러리 추가설치.서로 충돌나는 부분이 있어 아래 라이브러리가 필요하다.

이 내용은 prettier 사이트에서 확인 가능하다.

ESLint (and other linters)

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. There’s a similar config for Stylelint: stylelint-config-prettier

npm i -D eslint-config-prettier eslint-plugin-prettier

 

5. eslint를 실행시킨다.

npx eslint --init

PS E:\react\react> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.3
Ok to proceed? (y) y
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
? How would you like to define a style for your project? ...
> Use a popular style guide
√ How would you like to define a style for your project? · prompt
√ What format do you want your config file to be in? · JavaScript
√ What style of indentation do you use? · tab
√ What quotes do you use for strings? · double
√ What line endings do you use? · windows
√ Do you require semicolons? · No / Yes
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
Installing eslint-plugin-react@latest

added 61 packages, and audited 561 packages in 57s

127 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.js file in E:\react\react

해당 명령어를 실행시키면 typescript를 쓰는지 어떤 스타일 가이드를 쓸건지에 대해서 질문을 하는데 맞는걸로 설정해주면 된다.

 

7. 생성된 .eslintrc.js는 다음과 같다.

- extends 속성을 통해 eslint:recommended 라는 속성은 스타일을 추천해주는 걸로 한다고 해놓았는데 이부분은 

Google, Facebook, Airbnb 등 기업들이 설정해 놓은 Eslint 설정을 가져다가 사용할수 있다.

- ignorePatterns 속성을 통해 무시하고 싶은 파일들을 설정할수 있다. ( .eslintignore 라는 파일을 생성해서 설정할수도 있다)

{
	"env": {
		"browser": true,
		"es2021": true
	},
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended"
	],
	"ignorePatterns": ["/node_modules", "/dist", "webpack.config.js"],
	"overrides": [
	],
	"parserOptions": {
		"ecmaVersion": "latest",
		"sourceType": "module"
	},
	"plugins": [
		"react"
	],
	"rules": {
		"indent": [
			"error",
			"tab"
		],
		"linebreak-style": [
			"error",
			"windows"
		],
		"quotes": [
			"error",
			"double"
		],
		"semi": [
			"error",
			"always"
		]
	}
}

 

8. prettier 설정 가져오기

- 아래 사이트의 playground 메뉴탭으로 이동.

https://prettier.io/playground/

 

- .prettier.json파일을 생성하여 playground 에서 "Copy config JSON" 버튼을 통해 복사한 정보를 붙여넣기 해준다.

{
    "arrowParens": "always",
    "bracketSameLine": false,
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleAttributePerLine": false,
    "singleQuote": false,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
  }

- 무시하는 파일에 대한 설정은 .prettierignore

/node_modules
/dist
webpack.config.js

9. prettier에 대한 추가 설정.  .eslintrc.json에 rule 추가

"rules": {
		"prettier/pretteir": "error",
        }

 

10. VSC에 Prettier Eslint, Eslint package를 추가 설치해준다.

 

 

기본 설치 완료..