Gathering detailed insights and metrics for eslint-config-alloy
Gathering detailed insights and metrics for eslint-config-alloy
npm install eslint-config-alloy
Typescript
Module System
Node Version
NPM Version
78.6
Supply Chain
92.9
Quality
75.7
Maintenance
100
Vulnerability
97.3
License
JavaScript (73.11%)
TypeScript (15.93%)
Vue (10.03%)
CSS (0.72%)
HTML (0.17%)
Shell (0.05%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
2,694,925
Last Day
2,892
Last Week
15,215
Last Month
66,205
Last Year
982,722
2,652 Stars
459 Commits
314 Forks
41 Watchers
6 Branches
16 Contributors
Updated on Feb 05, 2025
Minified
Minified + Gzipped
Latest Version
5.1.2
Package Id
eslint-config-alloy@5.1.2
Unpacked Size
1.30 MB
Size
222.34 kB
File Count
1,248
NPM Version
9.5.0
Node Version
18.15.0
Published on
Aug 28, 2023
Cumulative downloads
Total Downloads
Last Day
8.3%
2,892
Compared to previous day
Last Week
2.7%
15,215
Compared to previous week
Last Month
62.2%
66,205
Compared to previous month
Last Year
26%
982,722
Compared to previous year
9
46
English / 简体中文
NEWS: eslint-config-alloy now support TypeScript 5.0
If you are using TypeScript 4.0, please npm install --save-dev eslint-config-alloy@4
NEWS: eslint-config-alloy now support Vue 3.0
If you are using Vue 2.0, please npm install --save-dev eslint-config-alloy@3
The AlloyTeam 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.
Please choose the following configuration based on the technology stack used by your project:
Prettier is a code formatting tool that offers fewer options but is more professional than the style-related rules in ESLint.
Now that Prettier has become a necessary tool in front-end projects, eslint-config-alloy does not need to maintain the style-related rules in ESLint anymore, so we completely removed all Prettier related rules in the v3 version, and use ESLint to check logical errors which it's good at.
As for whether two spaces or four spaces are used for indentation and whether there is a semicolon at the end, you can configure it in the project's .prettierrc.js
. Of course, we also provide a recommended Prettier configuration for your reference.
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-alloy also inherits the philosophy of ESLint. It will not emphasize the need to use our config. Instead, we help you to make your config by reference our completed documents, examples, tests, websites, etc.
Relentless push automation
eslint-config-alloy
uses a high degree of automation to hand over all processes that can be managed automatically, including:
Also, through automated scripts, we can even divide and conquer thousands of ESLint configuration files, and each rule is managed in a separate directory:
bad.js
and good.js
in a single configuration are output to website by script, and you can even see the error message (which are run in a real ESLint script) in the bad.js
of websiteThe benefits of this are very obvious — test as a document, as a website. We can maintain the rules and tests in one place. Other tasks are handed over to an automated script, which greatly reduces the maintenance cost. In short, when we have a new rule to add, we only need to write three files test/index/another-rule/.eslintrc.js
, test/index/another-rule/bad.js
, test/index/another-rule/good.js
.
ESLint is updated very quickly, there is a new version almost every week, sometimes there are new rules, sometimes existing rules are deprecated, and related plug-ins (React/Vue/TypeScript) will be updated from time to time. Without automation tools, it is difficult to follow up.
And eslint-config-alloy
, through the above-mentioned automated tools, can receive notifications from GitHub Actions at the first time, telling us which rules need to be added:
In this way, we can follow the latest rules in a time when the front-end community is changing rapidly, and always keep the vitality and advanced of eslint-config-alloy
.
1npm install --save-dev eslint @babel/core @babel/eslint-parser eslint-config-alloy
Create an .eslintrc.js
in the root directory of your project, then copy the following content into it:
1module.exports = { 2 extends: [ 3 'alloy', 4 ], 5 env: { 6 // Your environments (which contains several predefined global variables) 7 // 8 // browser: true, 9 // node: true, 10 // mocha: true, 11 // jest: true, 12 // jquery: true 13 }, 14 globals: { 15 // Your global variables (setting to false means it's not allowed to be reassigned) 16 // 17 // myGlobal: false 18 }, 19 rules: { 20 // Customize your rules 21 }, 22};
1npm install --save-dev eslint @babel/core @babel/eslint-parser @babel/preset-react@latest eslint-plugin-react eslint-config-alloy
Create an .eslintrc.js
in the root directory of your project, then copy the following content into it:
1module.exports = { 2 extends: [ 3 'alloy', 4 'alloy/react', 5 ], 6 env: { 7 // Your environments (which contains several predefined global variables) 8 // 9 // browser: true, 10 // node: true, 11 // mocha: true, 12 // jest: true, 13 // jquery: true 14 }, 15 globals: { 16 // Your global variables (setting to false means it's not allowed to be reassigned) 17 // 18 // myGlobal: false 19 }, 20 rules: { 21 // Customize your rules 22 }, 23};
1npm install --save-dev eslint @babel/core @babel/eslint-parser vue-eslint-parser eslint-plugin-vue eslint-config-alloy
Create an .eslintrc.js
in the root directory of your project, then copy the following content into it:
1module.exports = { 2 extends: [ 3 'alloy', 4 'alloy/vue', 5 ], 6 env: { 7 // Your environments (which contains several predefined global variables) 8 // 9 // browser: true, 10 // node: true, 11 // mocha: true, 12 // jest: true, 13 // jquery: true 14 }, 15 globals: { 16 // Your global variables (setting to false means it's not allowed to be reassigned) 17 // 18 // myGlobal: false 19 }, 20 rules: { 21 // Customize your rules 22 }, 23};
1npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy
Create an .eslintrc.js
in the root directory of your project, then copy the following content into it:
1module.exports = { 2 extends: [ 3 'alloy', 4 'alloy/typescript', 5 ], 6 env: { 7 // Your environments (which contains several predefined global variables) 8 // 9 // browser: true, 10 // node: true, 11 // mocha: true, 12 // jest: true, 13 // jquery: true 14 }, 15 globals: { 16 // Your global variables (setting to false means it's not allowed to be reassigned) 17 // 18 // myGlobal: false 19 }, 20 rules: { 21 // Customize your rules 22 }, 23};
1npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-alloy
Create an .eslintrc.js
in the root directory of your project, then copy the following content into it:
1module.exports = { 2 extends: [ 3 'alloy', 4 'alloy/react', 5 'alloy/typescript', 6 ], 7 env: { 8 // Your environments (which contains several predefined global variables) 9 // 10 // browser: true, 11 // node: true, 12 // mocha: true, 13 // jest: true, 14 // jquery: true 15 }, 16 globals: { 17 // Your global variables (setting to false means it's not allowed to be reassigned) 18 // 19 // myGlobal: false 20 }, 21 rules: { 22 // Customize your rules 23 }, 24};
It is recommended to use npm init vue@3
to create a project with Vue, TypeScript and ESLint integrated, and then refer to this example to adjust its ESLint configuration.
The conventional way is as follows:
1npm install --save-dev @babel/core @babel/eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript eslint eslint-config-alloy eslint-plugin-vue vue-eslint-parser
Create an .eslintrc.js
in the root directory of your project, then copy the following content into it:
1module.exports = { 2 extends: ['alloy', 'alloy/vue', 'alloy/typescript'], 3 parser: 'vue-eslint-parser', 4 parserOptions: { 5 parser: { 6 js: '@babel/eslint-parser', 7 jsx: '@babel/eslint-parser', 8 9 ts: '@typescript-eslint/parser', 10 tsx: '@typescript-eslint/parser', 11 12 // Leave the template parser unspecified, so that it could be determined by `<script lang="...">` 13 }, 14 }, 15 env: { 16 // Your environments (which contains several predefined global variables) 17 // 18 // browser: true, 19 // node: true, 20 // mocha: true, 21 // jest: true, 22 // jquery: true 23 }, 24 globals: { 25 // Your global variables (setting to false means it's not allowed to be reassigned) 26 // 27 // myGlobal: false 28 }, 29 rules: { 30 // Customize your rules 31 }, 32};
Just install the ESLint extension in VSCode.
Refer to here to configure the extension.
If you want to enable auto-fix-on-save, you need to set your .vscode/settings.json
like this:
1{ 2 "editor.codeActionsOnSave": { 3 "source.fixAll.eslint": true 4 }, 5}
eslint-config-alloy
does not include any style-related rules in v3, so there is no need to install eslint-config-prettier
. Just install prettier
and related VSCode plugins.
AlloyTeam provides a set of Prettier configuration, you can create a .prettierrc
to reuse it:
1"eslint-config-alloy/.prettierrc.js"
A best practice for VSCode is to auto format code with Prettier and autofix errors with ESLint by setting .vscode/settings.json
to this:
1{ 2 "files.eol": "\n", 3 "editor.tabSize": 2, 4 "editor.defaultFormatter": "esbenp.prettier-vscode", 5 "[jsonc]": { 6 "editor.defaultFormatter": "esbenp.prettier-vscode" 7 }, 8 "editor.codeActionsOnSave": { 9 "source.fixAll.eslint": true 10 } 11}
1# install dependencies 2pnpm i 3# build eslintrc like index.js, react.js, etc. 4pnpm build 5# run tests 6pnpm test 7# autofix prettier errors 8pnpm prettier:fix 9# check if all rules are covered 10pnpm rulesCoverage 11# publish new version 12npm version <major|minor|patch> 13git push --follow-tags 14npm publish
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 four years of maintaining, eslint-config-alloy
is now very mature and progressive and has been welcomed by many teams inside and outside the company.
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-alloy
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.
airbnb
eslint-config-alloy
has officially maintained vue
, typescript
and react+typescript
rules. In contrast, airbnb's vue
and typescript
are maintained by third parties.airbnb
It's okay, eslint-config-alloy
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.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 2/25 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
license file not detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
26 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More