Thursday, September 30, 2021

Installing ESLint extension for VSCode

My project has ESLint configured on both the client and server code, the code is separated under to folders in the same git repository.  Command line linting worked great.  Below are quick notes on how to get the linter configured and recognized by VSCode.

  • Install the ESLint extension for Visual Studio Code.  
  • .vscode/settings.json configuration - multiple useful settings so far:
    • Because there are multiple working directories under the root project folder, must set "eslint.workingDirectories". 
      • Without setting "eslint.workingDirectories" it was only formatting one of my folders ("server").  It wasn't until "eslint.workingDirectories" was specified did it recognize other folders as well.
    • "editor.tabSize: my project uses spaces instead of tabs and two spaces by default
    • "editor.rulers":  visually see how many characters can fit on a line
    • "files.eol": CRLF or LF
    • "editor.autoIndent":  when pressing enter, auto-indent or not
    • "editor.defaultFormatter":  specify the ESLint extension installed
    • "editor.formatOnPaste"/"editor.formatOnSave"/"editor.format.enable": must be enabled to format and format on paste/save

{

  "eslint.workingDirectories":[
    "./client",
    "./server"
  ],
  "editor.tabSize":2,
  "editor.rulers":[
    120
  ],
  "files.eol":"\n",
  "editor.autoIndent":"keep",
  "[javascript]":{
    "editor.defaultFormatter":"dbaeumer.vscode-eslint"
  },
  "editor.formatOnPaste":true,
  "editor.formatOnSave":true,
  "eslint.format.enable":true
}

Warnings:

  • Before I had the VSCode settings configured properly, I kept getting "Extension 'ESlint' cannot format <file>" errors during saving. 
    • These settings were key: "eslint.format.enable", "eslint.formatOnSave", and "eslint.workingDirectories"
  • Any files/patterns that are listed in the .eslintignore files will not be able to be formatted by the IDE!!!  I had *.test.js files ignored since I wanted to fix those eslint errors/warnings later.  But then I realized I had to fix them and remove them from the ignore files if I wanted to have them fixed during save.

Helpful articles:

https://stackoverflow.com/questions/45093510/eslint-not-working-in-vs-code

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint




No comments:

Post a Comment

I appreciate your time in leaving a comment!