eslint_prettier_vscode_js_ts_jsx_tsx.txt

Set UP Eslint + Prettier in VSCode 

// Docs (JS only) - https://github.com/wesbos/eslint-config-wesbos
// Anoter docs (TS and JSX) - https://github.com/sarpik/eslint-config-sarpik

https://gist.github.com/okovalov/aaf8bc5d05b59caa98eeec5e89612bd3

1. Create react app 

npx create-react-app react-ts --template typescript

2. Make sure it runs

cd react-ts 
yarn start (should start on port 3000)
(then stop the process by pressing Ctrl+C)

3. Install JS/TS eslint config

npx install-peerdeps --dev eslint-config-sarpik --yarn
or wesbos config 
npx install-peerdeps --dev eslint-config-wesbos --yarn

(
then below use "eslint": "^5.14.1" and 
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
 )

4. Update package.json

Add to package.json devDeps (replace existing)

replace "eslint": "5.x", with "eslint": "^6.6.0",
(or with "eslint": "^5.14.1"  in case you use wesbos)

and add listing commands to scripts 

  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx  --ignore-pattern '!.eslintrc'",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix  --ignore-pattern '!.eslintrc'"
  },

or for wesbos
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"


5. Update packages 

yarn 

6. Make sure the app still working

yarn start (it should still work, and stop the process after that

7. Create .eslintignore

node_modules/*
build/*
js/*
public/*

8. Create .eslintrc (for sarpic)

{
  "extends": ["sarpik"],
  "rules": {
    "no-console": 2,
    "quotes": [
      2,
      "single",
      {
        "avoidEscape": true,
        "allowTemplateLiterals": true
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 80,
        "semi": true,
        "arrowParens": "avoid"
      }
    ]
  }
}


or  .eslintrc (for wesbos)

{
  "extends": ["wesbos"],
  "rules": {
    "no-console": 2,
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 80,
        "semi": true,
        "arrowParens": "avoid"
      }
    ]
  }
}


9. Install vs-code extensions 

dbaeumer.vscode-eslint
esbenp.prettier-vscode

10. Check vs-code settings and set

  // Tell the ESLint plugin to run on save - from "Prettier Extension (eslint + prettier)"
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true, 
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.run": "onType",
  /** work as a formatter, too! */
  "eslint.format.enable": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  /**
   * Optional but IMPORTANT:
   * If you have the prettier extension enabled for other languages like CSS and HTML,
   * turn it off for JS since we are doing it through eslint already
  */
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],