[レスポンス]ESLint&プリセット設定(airbnbスタイルを適用)

1）Vscode拡張版にESLintとPrettierをインストールする

2）Prettyer取付

$ npm install prettier --save-dev --save-exact

prettyerチェックと修復のテスト

//test.js
let func=function 
( )
    {
  let 
foo  
='text'
return     foo}

$ npx prettier test.js

$ npx prettier --write test.js

3)eslintインストール

$ npm install eslint --save-dev

ESLint検査と修復のテスト

//test.js
let foo = text;;

$ npx eslint test.js

$ npx eslint test.js --fix

4）airbnb JSスタイルのインストール

$ npx install-peerdeps --dev eslint-config-airbnb

5)eslintとprettyerの衝突防止の設定

$ npm install eslint-plugin-prettier eslint-config-prettier --save-dev

6)eslint設定ファイルの作成

{
    "env": { 
        "browser": true, 
        "es6": true,
        "node": true 
    },
    "extends": ["airbnb", "plugin:prettier/recommended"],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
}

7)Prettyer設定ファイルの作成

// .prettierrc.js
// 일부 규칙을 추가했다.
// 그리고 주석을 적기 위해 json이 아닌 js파일로 생성하였음.

module.exports = {
    singleQuote: true,
    // 문자열은 singleQuote로 ("" -> '')
    semi: true,
    //코드 마지막에 세미콜론이 있게 formatting
    tabWidth: 4,
    // 들여쓰기 너비는 4칸
    trailingComma: 'all',
    // 배열 키:값 뒤에 항상 콤마를 붙히도록 formatting
    printWidth: 80,
    // 코드 한줄이 maximum 80칸
    arrowParens: 'avoid',
    // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
    endOfLine: "auto",
    // windows에 뜨는 'Delete cr' 에러 해결
};

8) VSCode setting

{
    // Set the default
    "editor.formatOnSave": true,
    // Enable per-language
    "[javascript]": {
      "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": {
      // For ESLint
      "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true,
    "prettier.disableLanguages": ["js"],
    "files.autoSave": "onFocusChange",
}

"[javascript]": {
      "editor.formatOnSave": false
},

"editor.codeActionsOnSave": {
  // For ESLint
  "source.fixAll.eslint": true
},

"eslint.alwaysShowStatus": true,

"prettier.disableLanguages": ["js"],

"files.autoSave": "onFocusChange",

を設定して、エディタからフォーカスを移動したときにファイルを自動的に保存します.

結果👍