[ESLint] 코드 저장시 autoformatting, var 키워드나 불필요한 return 등을 제거하는 방법

eslintrc.json의 plugins에 “@babel”이 포함되어 있을 때

js파일에서 error 표시도 뜨지 않고 코드 저장(command + S)를 하면 auto formatting도 되지 않는다.

이것을 지우고 나면 정상적으로 에러가 발생하고 저장할 때 리팩터링해준다.

저장하면 아래와 같이 변한다.

아래의 파일로 구성한다.

@babel/eslint-parser를 설치해서 어떤 에러를 해결하려고 했다가 다른 에러가 발생했다. ”no babel config file detected ...” 해당 종속성을 삭제하고 아래의 파일들로 구성했다.

standard No Babel config file detected when using @babel/eslint-parser - JavaScript

What version of this package are you using? 16.0.3 What operating system, Node.js, and npm version? Ubuntu 20, Node 12.19.0, Npm 6.14.8 What happened? Trying to use @babel/eslint-parser as the parser, but I get the error... standard: Use JavaScript Standard Style (https://standardjs.com) /home/tom/Desktop/test/index.js:0:0: Parsing error: No Babel config file detected for /home/tom/Desktop/test/index.js.

https://gitanswer.com/standard-no-babel-config-file-detected-when-using-babel-eslint-parser-javascript-928963949

.eslintrc.json

{
  "parserOptions": {
    "ecmaVersion": 12
  },
  "env": {
    "browser": true,
    "commonjs": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "globals": { "_": true },
  "plugins": ["import"],
  "extends": ["airbnb-base", "prettier"],
  "rules": {
    // "off" or 0 - turn the rule off
    // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
    // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
    // "no-var": "off",
    "no-console": "warn",
    "no-plusplus": "off",
    "no-shadow": "off",
    "vars-on-top": "off",
    "no-underscore-dangle": "off", // var _foo;
    "comma-dangle": "off",
    "func-names": "off", // setTimeout(function () {}, 0);
    "prefer-template": "off",
    "no-nested-ternary": "off",
    "max-classes-per-file": "off",
    "consistent-return": "off",
    "no-restricted-syntax": ["off", "ForOfStatement"], // disallow specified syntax(ex. WithStatement)
    "prefer-arrow-callback": "error", // Require using arrow functions for callbacks
    "require-await": "error",
    "arrow-parens": ["error", "as-needed"], // a => {}
    "no-param-reassign": ["error", { "props": false }],
    "no-unused-expressions": [
      "error",
      {
        "allowTernary": true, // a || b
        "allowShortCircuit": true, // a ? b : 0
        "allowTaggedTemplates": true
      }
    ],
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "max-len": [
      "error",
      {
        "code": 120,
        "ignoreComments": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true
      }
    ], // prettier의 printWidth 옵션 대신 사용
    "import/prefer-default-export": "off",
    "import/extensions": ["off"] // 확장자 명시
  }
}
JSON
복사

.prettierrc.json

{
  "singleQuote": true,
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "avoid",
  "printWidth": 80
}
JSON
복사

package.json

{
  "name": "PS_GroupA_coa",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.2",
    "prettier": "2.4.1"
  },
  "dependencies": {
    "babel-jest": "^27.4.5",
    "eslint-plugin-jest": "^25.2.4"
  }
}
JSON
복사