Eslint, Prettier 적용 - mojimojicorp/MojimojiMemoji GitHub Wiki

1. dependencies 설치

lint 관련 dependencies

npm i -D --save-exact eslint eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-config-react-app eslint-import-resolver-typescript eslint-loader eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks babel-eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

• Airbnb 규칙 적용
• eslint-config-airbnb와 eslint-config-airbnb-base중 react 관련 규칙이 모두 들어있는 eslint-config-airbnb 설치 　

　

prettier 관련 dependencies

npm i -D --save-exact prettier prettier-eslint prettier-eslint-cli eslint-plugin-prettier

　

　

2. config file 생성

.eslintrc

{
    "plugins": ["prettier", "@typescript-eslint"],
    "extends": ["airbnb-typescript", "react-app", "prettier"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.json"
    },
    "settings": {
        "import/resolver": {
            "typescript": {
                "alwaysTryTypes": true
            }
        }
    },
    "rules": {
        "object-curly-spacing": ["warn", "always"],
        "no-unused-vars": [
            "warn",
            {
                "vars": "all",
                "args": "none"
            }
        ],
        "@typescript-eslint/no-unused-vars": [
            "warn",
            {
                "vars": "all",
                "args": "none"
            }
        ],
        "@typescript-eslint/no-explicit-any": [
            "error",
            {
                "ignoreRestArgs": true
            }
        ],
        "max-len": [
            "warn",
            {
                "code": 80,
                "ignoreStrings": true,
                "ignoreTemplateLiterals": true,
                "ignoreComments": true
            }
        ],
        "no-plusplus": [
            "error",
            {
                "allowForLoopAfterthoughts": true
            }
        ],
        "react/jsx-key": "error",
        "import/no-extraneous-dependencies": [
            "error",
            {
                "devDependencies": [
                    "**/*.test.js",
                    "**/*.test.jsx",
                    "**/*.test.ts",
                    "**/*.test.tsx",
                    "src/tests/**/*"
                ]
            }
        ],
        "react/jsx-props-no-spreading": "off",
        "import/prefer-default-export": "off",
        "react/jsx-boolean-value": "off",
        "react/prop-types": "off",
        "react/no-unescaped-entities": "off",
        "react/jsx-one-expression-per-line": "off",
        "react/jsx-wrap-multilines": "off",
        "react/destructuring-assignment": "off"
    }
}
```　

　



> 각종 option [참조](https://prettier.io/docs/en/options.html)

**.prettierrc**
```js
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}

　

3. running script 작성

"scripts": {
        "start": "webpack-dev-server --open",
        "build": "webpack -p",
        "test": "echo \"Error: no test specified\" && exit 1",
        "lint": "eslint src/**/*.{ts,tsx,js,jsx}",
        "lint:fix": "eslint --fix src/**/*.{ts,tsx,js,jsx}",
        "format": "prettier --write src/**/*.{ts,tsx,scss,css,json}",
        "isready": "npm run format && npm run lint && npm run build"
    },