Skip to main content

Code linting

Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn't adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.

ESLint

ESLint is an open source JavaScript linting utility which has proven itself indispensable. It helps you enforce code-quality rules. JavaScript, being a dynamic and loosely-typed language, is prone to developer error.

ESLint isn't as opinionated as Prettier is and is widely customizable. This means you can encounter various configurations for each project.

Humanoids plugin

We've created a custom ESLint configuration which we will be using within our TaskFlow codebase. TypeScript is a dependency, so make sure you have it installed, before using the Humanoids configuration.

You can download and initialize the linter on this page.

Configuring VSCode formatting 'onSave'

Now it's time to edit your local VSCode preferences. Start by clicking on preferences in the menu and then settings. Next, click expansions in the list to the left and now click on Edit in settings.json in the panel to the right - your settings.json will now open in a different VSCode window. Replace the contents with the following code, save, and restart your VSCode application for the changes to take effect.

{
"editor.renderWhitespace": "all",
"editor.tabSize": 2,
"eslint.alwaysShowStatus": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.minimap.enabled": false,
"breadcrumbs.enabled": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.configPath": ".prettierrc",
"workbench.startupEditor": "newUntitledFile",
"editor.insertSpaces": false,
"editor.formatOnType": true,
"git.defaultCloneDirectory": ""
}

Further reading