Introduction
I wrote this post because I needed to remember what to do whenever I wanted to add static analysis capability to a new JS/TS project.
My instructions assume you’re using TypeScript, but if not, you can
remove all the npm packages and options that refer to TypeScript
and everything else will still work.
Also, this happens to be a configuration that I like - it works well for me - but it’s opinionated and you may find you want to modify the rules to suit your needs.
Install npm modules
Base modules
These are relevant for any JS project:
npm install --save-dev \
eslint \
eslint-config-airbnb \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-prettier \
prettier \React-specific modules
These are relevant for React projects:
npm install --save-dev \
eslint-plugin-react \
eslint-plugin-jsx-a11y \TypeScript-specific modules
These are relevant if you’re using TypeScript:
npm install --save-dev \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parserConfiguration
If you’re not using TypeScript or React, you can remove those options in the following files.
Add .eslintrc
{
"parser": "@typescript-eslint/parser",
"extends": ["airbnb", "prettier", "plugin:import/typescript"],
"plugins": ["prettier", "@typescript-eslint"],
"rules": {
"prettier/prettier": ["error"],
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]
},
"env": {
"mocha": true
}
}Add .prettierrc
{
"arrowParens": "avoid",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false
}Ignore irrelevant directories
Assuming you’re using TypeScript, you probably want to add .eslintignore and .prettierignore to your project root and add the dist/ directory to them. There’s no point in linting transpiled code.