Linting and Formatting
Setting up linters and code formatters is really important to group projects. When people are doing things like using different kinds of quotes, or people are following different semicolon rules, code
Linting and Formatting
Setting Up ESLint And Prettier

Objective
Setting up linters and code formatters is really important to group projects. When people are doing things like using different kinds of quotes, or people are following different semicolon rules, code can become a confusing mess real quick. Adding things like code formatters and linters can be really beneficial to building a uniform and readable code base. This guide aims to help you easily set these things up in your groups project.
Technologies Discussed
ESLint
Prettier
References
Install ESLint and Prettier VS Code Extensions
Make sure every team member has prettier and eslint VS Code extension's installed.
By default, most Labs projects will have both already in the DevDependancies
with a Labs config in place. In these cases you can simply run npm run lint
to view any errors or warnings and npm run lint:fix
will attempt to fix them
Configure ESLint and Prettier
Now we need to add dependencies to our project with some rc files! Woo hoo! 👏
In the root of your project's directory run:
npm i eslint prettier eslint-config-prettier eslint-plugin-prettier
Example React Config
module.exports = {
env: {
commonjs: true,
browser: true,
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: "module",
},
plugins: ["react", "prettier"],
rules: {},
overrides: [
{
files: ["**/*.test.js"],
env: {
jest: true,
},
},
],
};
Example Node Config
module.exports = {
env: {
node: true,
commonjs: true,
es6: true,
},
extends: ["eslint:recommended", "plugin:prettier/recommended"],
parserOptions: {
ecmaFeatures: {
ecmaVersion: 2018,
sourceType: "module",
},
plugins: ["prettier"],
rules: {},
overrides: [
{
files: ["**/*.test.js"],
env: {
jest: true,
},
},
],
};
By adding .prettierrc.js
to our root with the following content for both React and Node projects, then the whole team will have shared formatter rules.
module.exports = {
trailingComma: "es5",
tabWidth: 2,
semi: true,
singleQuote: true,
};
Then we can add some scripts to our package.json
.
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md)\""
}
}
Conclusion
Setting up ESLint and Prettier in your projects can go a long way in helping you write better, more readable code. Even more so when you're working in a team environment.
You may have noticed that the "rules" key's where empty in the .eslintrc examples. ESLint does a lot by default but if you want more in-depth, fine grain control over the coding style for your project visit their docs on rules here!
Last updated
Was this helpful?