Don't expect any fancy images in this post, let's get down to business. I'm just gonna hope you're using yarn because you should be.
yarn add eslint --dev(from here)yarn run eslint --init(also from above link)Follow whatever options your heart desires in the
eslintsetup prompts.Get rid of the
package-lock.jsoncause likely theeslintcli used npm to install something. tsk. Remove that file, and just runyarnto make things right again.yarn add prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser -D(from here)Your repo should have an
.eslintrc.jsfile by now that looks like this:
module.exports = {
env: {
browser: true,
es2021: true,
'jest/globals': true,
node: true,
},
extends: ['airbnb-base', 'eslint:recommended', 'prettier'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['@typescript-eslint', 'jest', 'prettier'],
rules: {
semi: ['error', 'always'],
quotes: ['error', 'single'],
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
'import/no-dynamic-require': 0,
'global-require': 0,
'import/prefer-default-export': 0,
'no-underscore-dangle': 0,
'no-await-in-loop': 0,
'no-restricted-syntax': 0,
'no-return-await': 0,
'no-console': 0,
'prettier/prettier': [
'error',
{
trailingComma: 'es5',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
endOfLine: 'lf',
arrowParens: 'always',
},
],
},
};
- And an
.eslintignorethat looks like this: (if not create one)
/node_modules
/reports
- Add a command in your
package.jsonto run lint fixes
{
...
"scripts": {
...
"lintfix": "eslint src --fix --cache",
...
},
}
- If you want to use husky for pre-commit hooks, be my guest. You can check the site for instructions but here they are anyway:
a.
yarn add husky --save-devb.npx husky installc.npx husky add .husky/pre-commit "yarn eslint && git add -A"d. git add -A e. git commit -m "finally configured eslint and prettier and husky without any 🐄 💩
Top comments (4)
The setup you presented is according to prettier docs "generally not recommened".
prettier.io/docs/en/integrating-wi...
Namely using eslint-plugin-prettier, which I find very annoying.
ah yes! I did read that part as well. Read that section a few times and tried to do it that way, but the above steps did work for what I was looking for specifically.
"These are generally not recommended, but can be useful in certain circumstances."
¯\(ツ)/¯
Excellent 😀 Do you recommend to use any style guide, like airbnb style guide?
Airbnb is the one I use by default in any new project!