CYF ESLint Configuration
A standard ESLint configuration for all CYF examples/projects.
Versioning
This configuration uses SemVer, interpreted as follows:
-
Patch release (
x.y.z->x.y.z+1): bugfixes and tooling updates mean that code that previously passed linting should continue to pass after the update. -
Minor release (
x.y.z->x.y+1.0): a change to an existing rule means that code that previously failed linting may now pass, or a new configuration means that code that previously passed linting should continue to pass. -
Major release (
x.y.z->x+1.0.0): a new rule, or a change to an existing rule, means that code that previously passed linting will not pass any more.
Please bear these definitions in mind when reporting any bugs.
Usage
Install this package along with ESLint itself:
npm install --save-dev eslint @codeyourfuture/eslint-config-standard
Then create an ESLint config file and add this config:
import cyf from "@codeyourfuture/eslint-config-standard";
export default [...cyf.configs.standard];
Alternatively, for a slightly more permissive set of rules, you can use cyf.configs.lax.
You can also call cyf.configure with some rules to add/override your own settings:
export default [...cyf.configure({
// ...
})];
Principles
- Errors only - don't teach learners to ignore any output, all rules should either be
"error"or"off" - Maximise consistency - where there are options (e.g. braces for single-line statements, parentheses around arrow function parameters), be consistent with the non-optional cases
- Minimise change set size - keep commits small so learners can focus on the important changes
Rules
This config starts from the ESLint and Stylistic recommended rules then adds the following:
| Configuration | Rule | Setting | Principles/rationale |
|---|---|---|---|
| standard, lax | @stylistic/arrow-parens | 2, 3 | |
| standard, lax | @stylistic/brace-style | "1tbs", { "allowSingleLine": false } | |
| standard, lax | @stylistic/comma-dangle | "always-multiline" | 3 |
| standard | @stylistic/indent | "tab", { "SwitchCase": 1 } | Tabs are more accessible |
| standard | @stylistic/linebreak-style | "unix" | |
| standard, lax | @stylistic/no-trailing-spaces | ||
| standard, lax | @stylistic/object-curly-spacing | "always" | |
| standard, lax | @stylistic/operator-linebreak | "before" | |
| standard, lax | @stylistic/quote-props | "as-needed" | 3 |
| standard, lax | @stylistic/quotes | "double", { "avoidEscape": true, "allowTemplateLiterals": false } | More likely to need ' inside a string than " |
| standard, lax | @stylistic/semi | Learners shouldn't have to memorise the ASI rules | |
| standard, lax | curly | 2 | |
| standard, lax | no-unused-vars | { "ignoreRestSiblings": true } | |
| standard, lax | no-var | Stick with let and const for more predictable behaviour |
Development
You can clone this repo and run npm install to install the development dependencies. Two scripts are provided:
-
lint: uses the version of ESLint installed as a dev dependency to lintindex.jsagainst its own rules. -
test:examples: runsbin/examples.shto test the configuration against thepass.jsandfail.jsexamples inexamples/.pass.jscontains code that should pass linting according to the configuration,fail.jscontains code that should fail linting. -
test:install: runsbin/test.shto create a package, installs ESLint (version defined by the required environment variableESLINT_VERSION) and the current version of this configuration, then checks that there are no version conflicts and lintsindex.js. E.g.ESLINT_VERSION=9 npm run test:installwill test that this configuration works with the latest version of ESLint 9.