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

jonmad·2020년 11월 17일
1
post-thumbnail

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"
}

폴더 구조

Vscode Extension

  1. material theme

  2. marterial icon

  3. Prettier

  4. Eslint

  5. Bracket Pair Colorizer

  6. Indent Rainbow

  7. Auto Rename Tag

  8. Css peek

  9. Html Css support

  10. Live server

  11. HTML to CSS completion

profile
나랑 같이 개발할 사람🖐

0개의 댓글