🔥 eslint & prettier 설정하기

$ yarn add --dev eslint prettier eslint-plugin-prettier eslint-config-prettier

• eslint-plugin-prettier
  • prettier를 ESLint 플러그인으로 추가한다. 즉, prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해준다.
• eslint-config-prettier
  • eslint의 code-formatting rule을 모두 꺼서 conflict 방지해준다.

.eslintrc.js

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['react', 'react-hooks', 'import', 'prettier', '@typescript-eslint'],
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  env: {
    browser: true,
    es6: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  rules: {
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", "ts", ".jsx", "tsx"] }
    ]{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.eol": "\\n"
}
	},
};

.prettierrc

{
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.eol": "\\n"
}

react-native eslint & prettier 설정 (with airbnb-style)

[React.js] ESLint와 Prettier를 이용한 React 환경 설정 (VSCode)

🔥 airbnb + react-native-community eslint style 적용하기

$ npx install-peerdeps --dev eslint-config-airbnb
$ yarn add --dev @react-native-community/eslint-config

• eslint-config-airbnb
• @react-natvie-community/eslint-config