시간을 줄이자 React / Vscode 초기세팅

Devback·2020년 11월 17일

React 초기 세팅

Cra 설치

npx create-react-app [폴더 이름]

React Router 설치

npm install react-router-dom --save

Sass 설치

npm install node-sass --save

Redux React-redux 설치

npm install redux react-redux --save

redux-devtools-extension

npm install --save redux-devtools-extension

Styled Components 설치

npm install --save styled-components

styled reset

npm i styled-reset --save

Axios 설치

npm install axios --save

Eslint + Prettier 세팅 (airbnb 버전)

npx install-peerdeps --dev eslint-config-airbnb

eslint 설정

//.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends:['airbnb','prettier/react', 'eslint:recommended','plugin:prettier/recommended'],
  // prettier/react 추가
  rules:{
    'react/jsx-filename-extension': 
    ['error', { 'extensions': [".js", ".jsx"] }],
  }
};

프리티어 설정

//.prettierrc.js

module.exports = {
  singleQuote: true,
  // 문자열은 따옴표로 formatting
  semi: true,
  //코드 마지막에 세미콜른이 있게 formatting
  useTabs: false,
  //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  tabWidth: 2,
  // 들여쓰기 너비는 2칸
  trailingComma: 'all',
  // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 	  	//formatting
  printWidth: 80,
  // 코드 한줄이 maximum 80칸
  arrowParens: 'avoid',
  // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
};

settings.json 설정

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
//   "eslint.autoFixOnSave": true,
// 위 설정이 deprecated 되었다고 나오면 바로 아래 프로퍼티로 이용하면 됩니다.

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange"
}