npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ele-cloud/eslint-config-dxhy

v1.0.0

Published

大象慧云 ESLint 规则

Downloads

6

Readme

eslint-config-dxhy

Build Status npm package

English / 简体中文


The Ele Cloud ESLint config is not only a progressive ESLint config for your React/Vue/TypeScript projects but also the best reference for configuring your personalized ESLint rules.

Quick start

Please choose the following configuration based on the technology stack used by your project:

Philosophy

  • Let Prettier handle style-related rules
  • Inherit ESLint's philosophy and help everyone build their own rules
  • High degree of automation: advanced rules management, test as a document, as a website
  • Keep up with the times, follow up the latest rules as soon as possible

Usage

Built-in

npm install --save-dev eslint babel-eslint eslint-config-dxhy

Create an .eslintrc.js in the root directory of your project, then copy the following content into it:

module.exports = {
    extends: [
        'dxhy',
    ],
    env: {
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // Customize your rules
    }
};

React

npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-config-dxhy

Create an .eslintrc.js in the root directory of your project, then copy the following content into it:

module.exports = {
    extends: [
        'dxhy',
        'dxhy/react',
    ],
    env: {
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // Customize your rules
    }
};

Vue

npm install --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue eslint-config-dxhy

Create an .eslintrc.js in the root directory of your project, then copy the following content into it:

module.exports = {
    extends: [
        'dxhy',
        'dxhy/vue',
    ],
    env: {
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // Customize your rules
    }
};

TypeScript

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-dxhy

Create an .eslintrc.js in the root directory of your project, then copy the following content into it:

module.exports = {
    extends: [
        'dxhy',
        'dxhy/typescript',
    ],
    env: {
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // Customize your rules
    }
};

TypeScript React

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-dxhy

Create an .eslintrc.js in the root directory of your project, then copy the following content into it:

module.exports = {
    extends: [
        'dxhy',
        'dxhy/react',
        'dxhy/typescript',
    ],
    env: {
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // Customize your rules
    }
};

Troubleshooting

With VSCode

ESLint will not lint .vue, .ts or .tsx files in VSCode by default, you need to set your .vscode/settings.json like this:

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "typescript",
        "typescriptreact"
    ]
}

autoFixOnSave is not working

If you want to auto fix-on-save for .vue, .ts or .tsx files, you need to set your .vscode/settings.json like this:

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ]
}

With Prettier

eslint-config-dxhy does not include all style-related rules in v3, so there is no need to install eslint-config-prettier. Just install prettier and related VSCode plugins.

Here is a .prettierrc.js configuration used by AlloyTeam for reference only:

// .prettierrc.js
module.exports = {
    // max 100 characters per line
    printWidth: 100,
    // use 4 spaces for indentation
    tabWidth: 4,
    // use spaces instead of indentations
    useTabs: false,
    // semicolon at the end of the line
    semi: true,
    // use single quotes
    singleQuote: true,
    // object's key is quoted only when necessary
    quoteProps: 'as-needed',
    // use double quotes instead of single quotes in jsx
    jsxSingleQuote: false,
    // no comma at the end
    trailingComma: 'none',
    // spaces are required at the beginning and end of the braces
    bracketSpacing: true,
    // end tag of jsx need to wrap
    jsxBracketSameLine: false,
    // brackets are required for arrow function parameter, even when there is only one parameter
    arrowParens: 'always',
    // format the entire contents of the file
    rangeStart: 0,
    rangeEnd: Infinity,
    // no need to write the beginning @prettier of the file
    requirePragma: false,
    // No need to automatically insert @prettier at the beginning of the file
    insertPragma: false,
    // use default break criteria
    proseWrap: 'preserve',
    // decide whether to break the html according to the display style
    htmlWhitespaceSensitivity: 'css',
    // lf for newline
    endOfLine: 'lf'
};

Scripts

# install dependencies
npm i
# build eslintrc like index.js, react.js, etc.
npm run build
# run tests
npm test
# autofix ESLint errors
npm run eslint:fix
# autofix prettier errors
npm run prettier:fix
# check if all rules are currently covered
npm run test:rulesCoverage
# publish new version
npm version <major|minor|patch>
git push --follow-tags
npm publish

Q & A

Why another ESLint config

Our team initially used Airbnb rules, but because it was too strict, some rules still needed to be personalized, which led to more and more changes in the future and finally decided to maintain a new set. After more than two years of polishing, eslint-config-dxhy is now very mature and progressive and has been welcomed by many teams inside and outside the company.

Why not standard

The standard specification believes that everyone should not waste time in personalized specifications, but the entire community should unify a specification. This statement makes some sense, but it runs against the ESLint's design philosophy. Don't you remember how ESLint defeated JSHint and became the most popular JS code inspection tool? It is because of the plugin and configuration that ESLint advocates, which meets the individual needs of different technology stacks of different teams.

Therefore, eslint-config-dxhy also inherits the philosophy of ESLint. It will not force you to use our config. Instead, we help you to make your config by referencing our examples, tests, websites and so on.

Why not airbnb

  1. eslint-config-dxhy has officially maintained vue, typescript and react+typescript rules. In contrast, airbnb's vue and typescript are maintained by third parties.
  2. Progressive to ensure that we can keep up with the times, as mentioned earlier
  3. Convenient personalization, including explanations and website examples

Looks good, but I still choose airbnb

It's okay, eslint-config-dxhy believes that different teams and projects can have different configurations from the design concept. Although you choose to use airbnb, you can still come to our website when you have personalized configuration needs.

Reference