Eslint Prettier In Typescript Project Using Vscode

Posted on November 28, 2021 7:00 AM by Dimas Lanjaka
JS TS NodeJS ESLint Programming JS

Auto Lint And Format Typescript Using VSCode With Eslint And Prettier

Linter becomes 2 types:

  • TSLint is a linter that must be utilized for TypeScript.
  • ESLint is a linter supports both JavaScript and TypeScript. ESLint has a more performant architecture than TSLint and that they will only be focusing on ESLint when providing editor linting integration for TypeScript. Now how to automated these linter in vscode without prettier plugin

ESM

for project with esm "type": "module" in package.json you can using these configurations ESM Eslint Auto Format Typescript Project In VSCode

Install dependencies

install using npm:

npm i -D prettier eslint-config-prettier eslint-plugin-prettier eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

install using yarn:

yarn add prettier eslint-config-prettier eslint-plugin-prettier eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

install and activate VSCode ESLint extension for auto Linter And Formatter

Download Here

Create .eslintrc.js

module.exports = {
  root: true, // Specifies your current project has own eslint rules without extends parent folder eslint rules
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  env: {
    browser: true, // add support for browser js (window,document,location,etc)
    amd: true, // add amd support
    node: true, // add node support (module.export,etc)
  },
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
  },
  extends: [
    "eslint:recommended", // uses eslint default recommended
    "plugin:@typescript-eslint/eslint-recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    "plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  // override rules for js files
  overrides: [
    {
      files: ["*.js"],
      rules: {
        "@typescript-eslint/no-var-requires": "off", // disable require warning on js files
      },
    },
  ],
  // specify your desired rules for eslint
  rules: {
    "@typescript-eslint/explicit-function-return-type": "off", // disable function without return type
    "no-unused-vars": "off", // disable original eslint unused-vars
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        argsIgnorePattern: "^_",
        varsIgnorePattern: "^_",
        caughtErrorsIgnorePattern: "^_",
      },
    ], // enable typescript-eslint unused-vars and allow unused vars start with underscore (_)
    "@typescript-eslint/no-explicit-any": "off", // allow any types
    "@typescript-eslint/no-this-alias": [
      // rules for this binding
      "error",
      {
        allowDestructuring: false, // Disallow `const { props, state } = this`; true by default
        allowedNames: ["self"], // Allow `const self = this`; `[]` by default
      },
    ],
    // "arrow-body-style" and "prefer-arrow-callback" are two ESLint core rules that can cause issues with prettier/prettier plugin, so turn them off.
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
  },
};

Create Prettier Config

specify your desired config for prettier

Using .prettierrc.js

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};

Using .prettierc

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "none",
  "tabWidth": 2
}

Create .vscode/settings.json

this will automate lint and format your codes when saving.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // let ESLint take formating and linting
  },
  "[json]": {
    "editor.formatOnSave": true // enable json formating with default vscode formatter
  },
  "editor.formatOnSave": false, // disable default vscode formatter
}

optional: create tsconfig.json (if not created yet)

for example tsconfig.json for node 12.

npm

npm install --save-dev @tsconfig/node12

yarn

yarn add --dev @tsconfig/node12
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 12",
  "extends": "@tsconfig/node12/tsconfig.json",
  "compilerOptions": {
    "preserveConstEnums": true,
    "allowJs": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "**/node_modules/**",
    "**/*.spec.ts",
    "**/*.test.ts",
    "**/__tests__/**"
  ]
}

Finish

now your vscode format and lint your codes automatically.

Incoming Terms
  • nodejs
  • eslint
  • prettier
  • vscode
  • auto
  • format
  • lint
Eslint Prettier In Typescript Project Using Vscode
Search