score:2

Accepted answer
  1. install eslint:
    npm i --save-dev eslint
    
  2. init eslint:
    npx eslint --init
    
    for some options you need choose next:
    • how would you like to use eslint?
    • to check syntax and find problems
    • what format do you want your config file to be in?
    • javascript
  3. install prettier:
    npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier 
    
  4. create .prettierrc config file:
     {
         "printwidth": 80,
         "singlequote": true,
         "trailingcomma": "es5"
     }
    

at now you can check style with eslint and fix style with prettier from comand line.

for vscode integration with eslint and prettier you need to install one of:

  1. esbenp.prettier-vscode.
  2. dbaeumer.vscode-eslint;

after that you need to set this extension as default formatter:

  1. open command pallette ctrl+shift+p;
  2. select format document with...;
  3. select configure document with...;
  4. select prettier - code formatter or eslint based on your preferences.

now, eslint will work as linter and prettier as formatter:

vscode problem tab: vscode problem tab

eslint output eslint output

if i save file all prettier problems will be fixed (autoformat on save should be turned on)

eslint plugin does not apply automatically changes in settings located in .prettierrc. see issue on github. to fix this you can:

  • move .prettierrc content in .eslint (not recommended because prettier plugins sometimes do not read this file);
  • run from command pallette in vscode eslint: restart eslint server after edit .prettierrc file.

Related Query

More Query from same tag