ascend-innovations
Ascend's ESLint config for writing clean consistent code 👌
Current Support
Currently this package provides configurations for:
- Vanilla JS
- React
- Node
- Jest
- Svelte
Installing
- Put an
.eslintrc(or any valid eslint config file) in your project root - You can alternatively put the config in your
package.jsonunder the property"eslintConfig":. This makes one less file in your project. - Install dependencies and select configuration you want (available configs listed below)
Default Vanilla JS Configuration
The default install will install all required AND optional dependencies. You can safely remove the following packages without triggering a peer dependency warning if you aren't consuming the associated configs:
reacteslint-config-airbnb,eslint-plugin-react,eslint-plugin-react-hooks,eslint-plugin-jsx-a11y
jesteslint-plugin-jest
svelteeslint-plugin-svelte3
These can safely be removed if they aren't needed.
Install it with NPM: npx install-peerdeps --dev @ascend-innovations/eslint-config\
Install it with Yarn: npx install-peerdeps --dev @ascend-innovations/eslint-config -Y\
Use it:
{
"extends": [
"@ascend-innovations/eslint-config"
]
}Notes:
- Extends eslint-config-airbnb-base
React Configuration
Use it:
{
"extends": [
"@ascend-innovations/eslint-config/react"
]
}Svelte Configuration
Use it: Svelte is a bit finicky with linting setups, so we keep Svelte stuff in it's own config to apply on top of the root config. This gives us greater control and makes debugging easier.
{
"extends": [
"@ascend-innovations/eslint-config",
"@ascend-innovations/eslint-config/svelte"
]
}Notes:
- Extends eslint-config-airbnb
Node Configuration
Use it:
{
"extends": [
"@ascend-innovations/eslint-config/node"
]
}Notes:
- Extends eslint-config-airbnb-base
Add Jest Support
You can add Jest support to any project:
{
"extends": [
"@ascend-innovations/eslint-config/jest"
]
}Set Up Project Lint Scripts
Add two scripts to your package.json to lint and/or fix:
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},Now you can manually lint your code by running npm run lint and fix all fixable issues with npm run lint:fix.
With VS Code
We highly recommend configuring your editor to do this automatically on file save across your whole project.
- Install the ESLint plugin for VSCode
- Create a file in your current project in
.vscode/settings.json. - Place the following configuration in the file:
{
// show eslint icon at bottom toolbar
"eslint.alwaysShowStatus": true,
//
// Auto-run code formatting on save
//
"editor.formatOnSave": true,
// Tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// The following prevents linting from running twice
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[svelte]": {
"editor.formatOnSave": false
},
}- In order to ensure there are no conflicts between Prettier and ESLint with any plugins you may have active in your VSCode editor, we also recommend adding a file at
.vscode/extensions.jsonwith the following content:
{
// See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
// List of extensions which should be recommended for users of this workspace.
"recommendations": [
"dbaeumer.vscode-eslint"
],
// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
"unwantedRecommendations": [
"esbenp.prettier-vscode", // You don't need the prettier extension with this setup
"editorconfig.editorconfig", // You don't need editor config with this setup
]
}This will make sure that anyone working on the project is aware of enabling/disabling proper extensions!