eslint-config-stickee v2.0.0
Stickee ESLint Config
Stickee settings for ESlint and Prettier
What it does
- Lints JavaScript based on the latest standards
- Fixes formatting issues with Prettier
- Removes 99.99% of the problems QA finds with your JavaScript code*
*no refunds
Upgrade
1. -> 2.
V2.0 no longer requires the following packages:
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-plugin-react-hooks
and updates the version numbers of a few packages.
The easiest way to upgrade is to:
- remove all
eslint-*
packages from yourpackage.json
- rerun installation step 2 (below)
Install
Optionally you can install stickee-javascript-code-style and skip steps 2 & 4.
- If you don't already have a
package.json
create one withnpm init
- Install the peer dependencies of the config (optional)
npx install-peerdeps --dev eslint-config-stickee
- Admire all the new devDependencies you have
- Create an
.eslintrc
file in the root of your project's directory (optional){ "extends": [ "stickee" ], }
- Add any custom webpack path resolvers you use*:
// this is used in Convert to allow the use of `import @/api` // which is set in the webpack config file "settings": { "import/resolver": { "webpack": { "config": "build/webpack.base.conf.js" } } },
- Add a lint script into your
package.json
:"scripts": { "lint": "eslint .", "lint:fix": "eslint . --fix" }
- Write beautiful JavaScript that makes QA proud
*
The config file must only contain webpack settings. Do not point it to a webpack.mix.js
file as this contains Laravel mix code.
If you are using Laravel Mix you can create a new webpack.config.js
file and reference it from webpack.mix.js
:
webpack.mix.js
mix.webpackConfig(require('./webpack.config.js'));
webpack.config.js
const path = require('path');
module.exports = {
resolve: {
extensions: ['.js', '.vue'],
alias: {
'@': path.join(__dirname, '/resources/js')
}
}
};
Settings
You can override any of the ESLint or Prettier settings.
{
"extends": [
"stickee"
],
"rules": {
"no-console": 2,
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 8,
"semicolons": "false" // looking at you Rehan
}
]
}
}
Note Overwriting Prettier settings requires you to rewrite the whole array.
Editor installation
ESLint should be configured to run as a pre-commit hook on the project you're working on but there's no harm in running it on every save.
PHPStorm
Refer to the docs for instructions on running ESLint from PHPStorm.
VSCode
- Install the ESLint package
- Change your VSCode
settings.json
file:// These are all my auto-save configs "editor.formatOnSave": true, // turn it off for JS and JSX, we will do this via eslint "[javascript]": { "editor.formatOnSave": false }, "[javascriptreact]": { "editor.formatOnSave": false }, // tell the ESLint plugin to run on save "eslint.autoFixOnSave": true, // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through ESLint already "prettier.disableLanguages": ["javascript", "javascriptreact"],
Thanks
Wes Bos for putting his config on GitHub.