prettier-eslint 설정

설치

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

• eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  extends: [],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": [ "error" ],
  },
};

• .prettierrc

{
  "singleQuote": false,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

vscode설정

1. 플러그인

prettier, eslint 설치

2. setting.json수정

코드 저장시 자동으로 수정해줌

{
    "editor.formatOnSave": false,
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}