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