A Typescript and Javascript configuration for ESLint used in NextGIS frontend projects.

All dependencies are already included in this library so you can not install them separately. Just run the command:

npm i -D @nextgis/eslint-config

Then create the .eslintrc in the root of your project and add the following content:

{
  "extends": [
    "@nextgis/eslint-config"
  ]
}

Install eslint loader for webpack

npm i -D eslint-loader

In your webpack configuration

module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.(t|j)sx?$/,
        loader: "eslint-loader",
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
    ]
  }
  // ...
};

To properly set up the environment for checking and automatically fixes *.ts files, follow these steps:

• Install VSCode ESLint extension from site or from plugin manager;

• Configure project to work with typescript files

Open VSCode File > Preferences > Settings JSON view

Or create config file manual:

mkdir .vscode && touch .vscode/settings.json

and add this to config:

  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "tslint.enable": false