Giter Club home page Giter Club logo

eslint-config-es's Introduction

eslint-config-es

eslint-config-es contains a strict ESLint configuration for ES2015+ and TypeScript.

Status

Category Status
Version npm
Dependencies David
Dev dependencies David
Build GitHub Actions
License GitHub

Installation

$ npm install eslint-config-es \
              eslint

The following additional ESLint plugins are included by default, so you don't have to install them:

Plugin Automatically enabled
eslint-plugin-eslint-comments Yes
eslint-plugin-extended Yes
eslint-plugin-mocha Yes
eslint-plugin-react No
eslint-plugin-unicorn Yes
@typescript-eslint/eslint-plugin No

To enable support for React and JSX, all you need to do is to install the react module. The appropriate rules will become enabled automatically.

To enable support for TypeScript, all you need to do is to install the typescript module. The appropriate rules will become enabled automatically for .ts and .tsx files. The generated configuration expects a tsconfig.json at the project root.

Quick Start

This module contains a very strict ESLint configuration for ES2015 and above, both for Node.js and browser development. Its aims to eradicate any variation in code style. If you can not tell any more, based on little individual manners, who of your co-workers wrote a piece of code, this module succeeded. This helps you to narrow down your focus to pure functionality, as you do not have to think about code styling any more at all.

To use one of those configurations, create a .eslintrc.json file in your project and use the extends keyword.

{
  "extends": "es/node"
}

Alternatively, you may also use es/browser.

If you want to override any rules, you can do so in your configuration file. For details on how to do this, e.g. to get an explanation on how to enable or disable specific rules, see the ESLint documentation on extending configuration files.

Running quality assurance

To run quality assurance for this module use roboter:

$ npm run roboter

Note: npx roboter will not work as our ESLint Rules are written in TypeScript, so they have to be compiled before usage. npm run roboter will do this.

Better ESLint Rules

This package has a built-in library that allows defining ESLint-Rules in a more strict but (what we think) better and intuitive format.

A basic example looks like this:

const betterRulesRecord: BetterRulesRecord = {
  camelcase: false, // compiles to "camelcase: 'off'"
  forDirection: [], // compiles to "for-direction: 'error'"
  noParens: [ 'always', { otherConfig: 'value' } ], // compiles to "no-parens: [ 'error', 'always', {otherConfig: 'value' } ]"
}

To be able to use those rules with ESLint, they have to be compiled with the betterRules.compile method. The whole betterRules package is exported by this library and can be used like this:

import { betterRules } from 'eslint-config-es';
const compiledESLintRules = betterRules.compile(betterRulesRecord);

// Will produce:
{
  camelcase: 'off',
  'for-direction': [ 'error' ], 
  'no-parens': [ 'error', 'always', { otherConfig: 'value' } ],
}

Differences to normal ESLint Rules

  1. Only 2 allowed rule-configs exist:
    1. false for turning it off.
    2. [] (possible empty) to turn it on with severity error and provide additional configuration.
  2. Rules are now in camelCase.
  3. error is the default and only for all rules.

withPlugin-Hook

You can use the withPlugin hook to avoid having to put plugin-rules in quotes ('react/test-rule') like this:

import { betterRules } from 'eslint-config-es'

const reactRules: BetterRulesRecord = betterRules.withPlugin('react', {
  booleanPropNaming: false
});

Plugin names do not get compiled

Thus, you can use this hook to avoid weird constructs and streamline your configs:

const weirdMix: BetterRulesRecord = {
  '@typescript-eslint/arrayType': []
};

const betterDefiniton: BetterRulesRecord = 
  betterRules.withPlugin('@typescript-eslint', {
    arrayType: []
  };

But why?

  1. Turning Rules off with false rather than with a string 'off' is easier to distinguish from turned on rules and strictly avoids typos (false will yield a compiler error if mistyped).
  2. We do not see a value in ESLint warnings, as warnings tend to get ignored.
  3. Because of 2., there is no need for additional abilities to turn on a rule (true, or a string), thus only allowing arrays [] streamlines and simplifies the configuration a lot.
  4. CamelCasing the rules avoids the need to sometimes type property-keys of rules with quotes ' (e.g. { 'for-direction': 'off'}), thus again streamlining configuration.

eslint-config-es's People

Contributors

davelosert avatar dependabot-preview[bot] avatar dependabot[bot] avatar goloroden avatar grundhoeferj avatar semantic-release-bot avatar susannaroden avatar yeldirium avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

eslint-config-es's Issues

linebreak-style

Ich verwende das Paket in einem Projekt mit Vue.js & TypeScript. IDE ist PHPStorm. Projekt hat keine Verbindung zu einem GitHub-Repository.

Unter Windows 10 erhalte ich die Fehlermeldungen, wenn ich den Befehl "npm run analyse" ausführe.

`export default interface Comment {

id: number;
body: string;
postId: number;

}
`

linebreak-style

Beispiel & Aufruf

Ich hab folgende Ergänzungswünsche der Readme zu diesem Paket.

  1. Beispiel einer .eslintrc.json mit rules, wie man diese auch deaktivieren kann. Hab den Aufbau im Projekt "tlse2021-fullstack-testen" (https://github.com/thenativeweb/tlse2021-fullstack-testen/blob/main/frontend/.eslintrc.json) gefunden.

.eslintrc.json

{ "root": true, "extends": [ "es/browser" ], "parserOptions": { "sourceType": "module" }, "rules": { "linebreak-style": "off", "@typescript-eslint/indent": "off", "class-methods-use-this": "off", "padded-blocks": "off" } }

  1. In der Readme steht am Ende der Befehl "npm run analyse". Wenn man das Paket "roboter" installiert, kann man den Befehl nicht aufrufen. Es muss die package.json angepasst werden.

scripts in package.json erweitern
"analyse": "eslint \"**/*.ts\" --ignore-path .eslintignore",

Configuration for rule "unicorn/explicit-length-check" is invalid

Error: .eslintrc.cjs » eslint-config-es/node:
Configuration for rule "unicorn/explicit-length-check" is invalid:
Value {"nonZero":"greaterThan","non-zero":"greater-than"} should NOT have additional properties.

is showing with [email protected] and later (current is 42.0.0).

package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "test.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "8.18.0",
    "eslint-config-es": "4.2.0",
    "eslint-plugin-eslint-comments": "3.2.0",
    "eslint-plugin-extended": "0.2.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-mocha": "10.0.5",
    "eslint-plugin-unicorn": "42.0.0"
  }
}

.eslintrc.cjs:

module.exports = {
  extends: [
    'es/node'
  ],
  parserOptions: {
    sourceType: 'module'
  },
  rules: {
  }
}

eslint test.js

results in the error

Error: .eslintrc.cjs » eslint-config-es/node:
        Configuration for rule "unicorn/explicit-length-check" is invalid:
        Value {"nonZero":"greaterThan","non-zero":"greater-than"} should NOT have additional properties.

and it's not possible to even disable that rule by:

  rules: {
    'unicorn/explicit-length-check': 0
  }

I guess you need to update this rule in eslint-config-es

Update rules

I have recently updated a few of our dependencies, but did not adjust the rules. The updated packages were:

| name | from version | to version |
| eslint-plugin-react | 7.24.0 | 7.26.1 |
| @typescript-eslint/eslint-plugin | 4.29.2 | 5.2.0 |
| @typescript-eslint/parser | 4.33.0 | 5.2.0 |

The breaking changes did not affect us. We still need to look over the changes in these packages and adjust our rules.

Conflucting rules: no-extra-parens and unicorn/no-nested-ternary

When using nested ternary operators (it is not nice, I know - but well), there are two rules:
no-extra-parens and unicorn/no-nested-ternary.

The former says not to put parenses around the second ternary, the latter say to do so.

E.g.:

// fullfills no-extra-parens
const withoutParens = first ? 'first' : second ? 'second' : 'third'

// Fulfills no-nested-ternary
const withParens = first ? 'first' : (second ? : 'second' : 'third');

Does not work in node 4.6.0 LTS

Hey guys :)

latest version 0.8.5 doesn't work on node 4.6.0, which is the current LTS version. It's caused by the array prototype function call includes in lines 289, 293 and 312. This is not supported in node 4.6.0.

Would you mind changing this to support older node versions? I would suggest adding an polyfill or just using old fashioned indexOf call.

peer dependencies need to be explicitely added in yarn projects

Starting with eslint-config-es v4 it's not sufficient to install only eslint and eslint-config-es in yarn projects anymore. In addition all peerDependencies need to be added explicitly. To my understanding the reason is the different handling of peerDependencies between yarn and npm, version 3 did work for yarn and npm because it did not use peerDependencies.

Could the peer dependencies be moved back to to make the plugin work with yarn again or are there any downsides I'm not aware of?

Example install output:

yarn install v1.22.17
        warning package.json: No license field
        warning [email protected]: No license field
        [1/4] Resolving packages...
        [2/4] Fetching packages...
        [3/4] Linking dependencies...
        warning " > [email protected]" has unmet peer dependency "@typescript-eslint/[email protected]".
        warning " > [email protected]" has unmet peer dependency "@typescript-eslint/[email protected]".
        warning " > [email protected]" has unmet peer dependency "[email protected]".
        warning " > [email protected]" has unmet peer dependency "[email protected]".
        warning " > [email protected]" has unmet peer dependency "[email protected]".
        warning " > [email protected]" has unmet peer dependency "[email protected]".
        warning " > [email protected]" has unmet peer dependency "[email protected]".

package.json used:

{
  "name": "eslint-deps",
  "version": "0.1.0",
  "dependencies": {
    "eslint-config-es": "^4.1.0",
    "eslint": "^8.8.0",
    "typescript": "^4.5.5"
  }
}

Downgrading to version 3 works for both yarn and npm, example:

{
  "name": "eslint-deps",
  "version": "0.1.0",
  "dependencies": {
    "eslint": "^7.32.0",
    "eslint-config-es": "^3.31.0",
    "typescript": "^4.5.5"
  }
}

Add eslint-plugin-react-hooks

👋🏻 Hey,

I just realized that the very awesome plugin eslint-plugin-react-hooks is not part of this package yet. I think it is super helpful - and especially for people new to react,this can avoid serious hooks-issues.

Are you interested in packaging this up here?
If so, I'd be happy to put up an PR. 🙂

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.