Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
@anolilab/eslint-config
Advanced tools
ESLint shareable config for the Anolilab JavaScript style guide.
This package provides Anolilab’s most comprehensive code style guide as an extensible shared config.
With a range of useful plugins that are often too time-consuming to setup, based on your project’s dependencies we will notify you about missing eslint plugins.
The goal is to reduce noise in code version control and promote use of the latest ES features.
Daniel Bannert's open source work is supported by the community on GitHub Sponsors
typescript
was installed.To install this config, run the following command.
npm install eslint @anolilab/eslint-config --save-dev
yarn add -D eslint @anolilab/eslint-config
pnpm add -D eslint @anolilab/eslint-config
If you don’t have a .eslintrc.cjs
, we will create the file for you after installing @anolilab/eslint-config
.
If you already have a .eslintrc.cjs
, then you can extend the .eslintrc.cjs
, with @anolilab/eslint-config
.
Note: Our default export contains all of our ESLint rules, including ECMAScript 6+.
@anolilab/eslint-config
use theecmaVersion
:2021
as default.To change this configuration, change
env: { es2021: false, then active you needed env }
same for,parserOptions: { "ecmaVersion": 2021 change the version }
module.exports = {
root: true,
extends: ["@anolilab/eslint-config"],
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
},
};
For more advanced use cases see the example configurations for Node, TypeScript, React or Prettier.
Note:
@anolilab/eslint-config
will handle the configuration for almost all eslint-plugins / eslint-configs automatically. With this you only need to install the needed plugins/configs for TypeScript or React and you done.
npm install --save-dev eslint typescript @anolilab/eslint-config
Please extend the .eslintrc.cjs
file with the correct tsconfig.js
path if you have a custom path.
module.exports = {
parserOptions: {
project: "./tsconfig.eslint.json",
},
};
For projects that use TypeScript and want additional rules that require type information (rules using type information take longer to run).
Extend the .eslintrc.cjs
file:
module.children = {
root: true,
extends: ["@anolilab/eslint-config", "@anolilab/eslint-config/typescript-type-checking"],
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
},
};
You need to have "react" and "react-dom" installed.
npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks @anolilab/eslint-config
Or for the use of TypeScript
in react install "typescript" as a dev dependency.
Please extend the .eslintrc.cjs
file with the correct tsconfig.js
path if you have a custom path.
module.exports = {
parserOptions: {
project: "./tsconfig.eslint.json",
},
};
npm install --save-dev eslint eslint-plugin-mdx @anolilab/eslint-config
You can configure @anolilab/eslint-config
options with your package.json
file.
Add this property to your package.json:
{
"anolilab": {
"eslint-config": {
// options
}
}
}
Type: number
Default: 4
It will throw an error if the value is not numeric.
Type: object
-> key: string
value: boolean
Disable a plugin in your package.json config to turn it off globally in your project.
Example using package.json:
{
"anolilab": {
"eslint-config": {
"plugin": {
"unicorn": false
}
}
}
}
Type: boolean
Default: undefined
To disable the warning, set the value to false
.
{
"anolilab": {
"eslint-config": {
"warn_on_unsupported_typescript_version": false
}
}
}
Type: boolean
Default: undefined
To disable the info, set the value to false
.
{
"anolilab": {
"eslint-config": {
"info_on_disabling_jsx_react_rule": false
}
}
}
Type: boolean
Default: undefined
To disable the info, set the value to false
.
{
"anolilab": {
"eslint-config": {
"info_on_disabling_prettier_conflict_rule": false
}
}
}
Type: boolean
Default: undefined
To disable the info, set the value to false
.
{
"anolilab": {
"eslint-config": {
"info_on_testing_library_framework": false
}
}
}
Type: boolean
Default: undefined
To disable the info, set the value to false
.
{
"anolilab": {
"eslint-config": {
"info_on_found_react_version": false
}
}
}
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, @anolilab/eslint-config
does not need to maintain the style-related rules in ESLint anymore,
so we completely removed all Prettier related rules, if prettier
is found in your package.json
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.
@anolilab/eslint-config
does disable all included style-related rules, so there is no need to install eslint-config-prettier
.
If you are using experimental features such as class fields with JavaScript files you should install @babel/eslint-parser
.
npm install --save-dev @babel/eslint-parser
This plugin provide a range of code quality rules:
The following plugins expand esLint to work with json files, and lint JavaScript contained in HTML, and MarkDown:
When linting code snippets in Markdown files, a few rules relating to globals and unused vars are disabled.
If a supported library is part of your project then it’s related esLint plugins will be loaded. The following plugins are supported:
eslint-plugin-lodash
and lodash
to use this plugin.eslint-plugin-lodash-fp
and lodash
to use this plugin.eslint-plugin-react-redux
and react-redux
to use this plugin.eslint-plugin-redux-saga
and redux-saga
to use this plugin.The following esLint plugins enforce good coding practices:
These plugins add code security rules to esLint:
The following test plugins are supported:
eslint-plugin-ava
and ava
to use this plugin.eslint-plugin-jest
and jest
to use this plugin.eslint-plugin-jest-async
and jest
to use this plugin.eslint-plugin-cypress
and cypress
to use this plugin.- eslint-import-resolver-node
- eslint-plugin-compat
- eslint-plugin-eslint-comments
- eslint-plugin-import
- eslint-plugin-markdown
- eslint-plugin-no-loops
- eslint-plugin-no-secrets
- eslint-plugin-optimize-regex
- eslint-plugin-promise
- eslint-plugin-sonarjs
- eslint-plugin-simple-import-sort
- eslint-plugin-sort-keys-fix
- eslint-plugin-unicorn
- eslint-plugin-you-dont-need-lodash-underscore
- eslint-plugin-you-dont-need-momentjs
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": ["css", "html", "javascript", "javascriptreact", "json", "markdown", "typescript", "typescriptreact", "yaml"]
}
If you want to enable auto-fix-on-save, you need to set your .vscode/settings.json
like this:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true
}
Additionally, we found it that being explicit about which formatter you are using for each file improves DX:
{
"[css]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[html]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[json]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[markdown]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[yaml]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
}
While not required if you've configured explicit formatter for each file type, I advise that you explicitly disable prettier extension in your project:
{
"prettier.enable": false
}
Sharing these settings in your project should be sufficient to prevent local settings accidentally overriding the desired formatter behavior.
The standard specification believes that everyone should not waste time in personalized specifications, but the entire community should unify a specification. This statement makes 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’s because of the plugin and configuration that ESLint advocates, which meets the individual needs of different technology stacks of different teams.
Therefore, @anolilab/eslint-config
also inherits the philosophy of ESLint. It will not force you to use our config.
Libraries in this ecosystem make the best effort to track Node.js’ release schedule. Here’s a post on why we think this is important.
If you would like to help take a look at the list of issues and check our Contributing guild.
Note: please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
The anolilab javascript-style-guide is open-sourced software licensed under the MIT license
FAQs
ESLint shareable config for the Anolilab JavaScript style guide.
The npm package @anolilab/eslint-config receives a total of 378 weekly downloads. As such, @anolilab/eslint-config popularity was classified as not popular.
We found that @anolilab/eslint-config demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.