@viewar/config-eslint

eslint-config-viewar

• Installation
• Configuration
  • NPM Lint Script
  • Integration (VsCode)
  • Import Resolvers
    • webpack
    • node

Installation

to skip installation and configuration,
just run mrm --preset @viewar/mrm-preset lint

see: lint Task of '@viewar/mrm-preset'

install package: npm i -D eslint @viewar/config-eslint
includes all eslint and prettier related plugins and shared configs

Configuration

eslint (either JS or JSON)

JS - {workspace}/.eslintrc.js:

module.exports = { extends: [require.resolve('@viewar/config-eslint')] };

JSON - {workspace}/.eslintrc:

{ "extends": ["./node_modules/@viewar/config-eslint/index.js"] }

prettier

// {workspace}/prettier.config.js
module.exports = require('@viewar/config-eslint/prettier.config.js');

NPM Lint Script

"lint": "eslint --fix --ext \".js,.jsx,.ts,.tsx\" . --quiet --format pretty && prettier **/*.{css,scss,md,json} --write"

Integration (VsCode)

install extensions:

• "dbaeumer.vscode-eslint"
• "teeLang.vsprettier"

configure vscode:

// {workspace}/.vscode/settings.json
{
  // PRETTIER
  {
  "editor.formatOnSaveTimeout": 500,

  "editor.defaultFormatter": "teeLang.vsprettier",
  "vsprettier.requireConfig": true,
  "vsprettier.packageManager": "npm",
  "vsprettier.useEsLint": false,
  "vsprettier.useStyleLint": true,

  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ],
  "eslint.alwaysShowStatus": true,
  "eslint.run": "onType",
  "eslint.lintTask.enable": true,
  "eslint.workingDirectories": [{ "directory": ".", "changeProcessCWD": true }],

  "javascript.implicitProjectConfig.checkJs": true,

  "javascript.validate.enable": false,
  "javascript.format.enable": false,
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnPaste": false,
    "editor.formatOnSave": false,
    "editor.formatOnType": false,
    "editor.formatOnSaveTimeout": 500
  },
}

Import Resolvers

enables absolute import paths
like import Header from 'components/Header'

webpack

applied to env 'react'

• uses 'tsconfig-paths-webpack-plugin' to resolve import paths
  requires: workspaceRoot/tsconfig.json
  see path-mapping for typescript

• if tsconfig.json is not present it won't use that plugin
  and uses the default resolve config:

    resolve: {
      extensions: ['.jsx', '.js', '.ts', '.tsx', '.json'],
      // paths are relative to workspace root
      alias:      {
        components: join(basename(CONSTANTS.paths.src), 'components'),
        assets: CONSTANTS.paths.assets
      },
      modules: ['node_modules'],
    }
  

• you can overwrite this config to fit your projects module resolvement,
  if you add 'webpack.config.resolve.js' to your workspaceRoot
  (use format of 'src/webpack.config.resolve.js')

  • This config will also be used by '@viewar/webpack'
  • for more information see webpack's resolve config

node

applied to env 'browser' and 'node'

{
  paths:      [ './src' ],
  extensions: [ '.js', '.jsx', '.json' ],
}