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.
Daniel Bannert's open source work is supported by the community on GitHub Sponsors
Our package serves as a valuable resource for JavaScript/Typescript-based projects, offering composable ESLint configurations. It encompasses a range of features, including performance optimization and the flexibility to extend pre-defined base configurations.
Tailored Configuration for Workspaces: With this package, each workspace within your monorepo gains the ability to have its own customized ESLint configuration. This ensures that individual projects can maintain their specific requirements while still adhering to the overall guidelines.
Configurability at Your Fingertips: Crafting your workspace's ESLint configuration is a breeze, thanks to the seamless composition of pre-defined base configurations. This empowers you to tailor the settings to suit your project's unique needs, without starting from scratch.
Streamlined Convenience: Say goodbye to the hassle of installing plugins for each workspace. Our package integrates @rushstack/eslint-patch, eliminating the need for repetitive plugin installations. Enjoy peace of mind as you focus on your work, knowing that the necessary plugins are automatically included.
Enhanced Efficiency: We've optimized the package's performance by intelligently enabling plugins based on file naming conventions. This streamlined approach ensures that your ESLint checks run efficiently, targeting the relevant files and maximizing productivity.
In summary, our package provides comprehensive and adaptable ESLint configurations for JavaScript and Typescript projects. It empowers you to achieve code quality while minimizing overhead and maximizing productivity throughout your workspaces.
typescript
was installed.To install this config, run the following command.
npm install --save-dev eslint @anolilab/eslint-config
pnpm add -D eslint @anolilab/eslint-config
yarn add -D eslint @anolilab/eslint-config
If you don’t have a .eslintrc.js
, we will create the file for you after installing @anolilab/eslint-config
.
If you already have a .eslintrc.js
, then you can extend the .eslintrc.js
, with @anolilab/eslint-config
.
Note: If the script detects an existing
.eslintrc.js
file, it will not overwrite it.
Note: It can happen that the postinstall script don't run, then you have to add the
.eslintrc.js
manually, or you will use bin command./node_modules/bin/anolilab-eslint-config
to generate it.
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 }
/** @ts-check */
const { defineConfig } = require('@anolilab/eslint-config/define-config');
module.exports = defineConfig({
env: {
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
extends: ["@anolilab/eslint-config"],
globals: {
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
root: true,
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.js
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.js
file:
/** @ts-check */
const { defineConfig } = require('@anolilab/eslint-config/define-config');
module.exports = defineConfig({
env: {
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
extends: ["@anolilab/eslint-config", "@anolilab/eslint-config/typescript-type-checking"],
globals: {
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
root: true,
rules: {
// Customize your rules
},
});
Tip: Run eslint with the TIMING=1 to identify slow rules.
TIMING=1 eslint . --ext .ts,.tsx
This is useful to identify rules that are slow because they require type information.
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.js
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
For more information about missing
or optional
to install rules see the eslint
console output.
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 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.