ESLint for TypeScript

[tima101]

Things to do to enable highlighting and auto-fixing of TS code by ESLint on VS code editor:

• install extension: dbaeumer.vscode-eslint
• set TS parsing and proper directory by adding settings to settings.json for Workspace:

  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ],
  "eslint.workingDirectories": [
		{ "directory": "./book/1-end/app", "changeProcessCWD": true },
	]

• add .eslintrc.js to the root of your project, for example ./book/1-end/app

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: ["plugin:@typescript-eslint/recommended", "prettier"],
  env: {
    "es6": true,
    "node": true
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'all',
        arrowParens: 'always',
        printWidth: 100,
        semi: true
      },
    ],
    '@typescript-eslint/no-unused-vars': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off'
 },
  plugins: [
    "prettier"
  ]
}

• add all necessary packages to devDependencies, for ./book/1-end/app, I have:

  "devDependencies": {
    "@types/node": "12.7.9",
    "@types/react": "16.9.4",
    "@types/react-dom": "16.9.1",
    "@typescript-eslint/eslint-plugin": "^2.4.0",
    "@typescript-eslint/parser": "^2.4.0",
    "eslint": "^6.5.1",
    "eslint-config-prettier": "^6.4.0",
    "eslint-plugin-prettier": "^3.1.1",
    "prettier": "^1.18.2"
  }

• you may need to restart VS code editor
• you can also add command "lint": "eslint . --ext .js,.jsx,.ts,.tsx" to package.json

Highlighting by ESLint:

To fix, press Ctrl + S.

Add your own formatting rules to .eslintrc.js

[tima101]

@delgermurun @klyburke I will close this issue when done updating all chapters and main app.

[delgermurun]

@tima101 It works.

[zamgill]

For anyone having an issue under ./book/1-begin/app folder please add the following line in settings.json

{ "directory": "./book/1-begin/app", "changeProcessCWD": true },

[tima101]

@zamgill Thanks.

Workspace settings for VS code editor:
https://github.com/async-labs/saas/blob/master/.vscode/settings.json