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 .eslintrc.cjs as an extensible shared config, with a range of useful plugins that are often too time-consuming to setup and provides an easy way to install just the plugins you need, based on your project’s dependencies.
To install this config, run the following command.
npm install eslint @anolilab/eslint-config --save-dev
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 eslint-plugin-node @anolilab/eslint-config
npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @anolilab/eslint-config
npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-plugin-react-hooks @anolilab/eslint-config
Or for the use of TypeScript
in react
npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks @anolilab/eslint-config
Please extend the .eslintrc.cjs
file with the correct tsconfig.js
path.
export default {
parserOptions: {
project: "./tsconfig.eslint.json",
},
}
npm install --save-dev eslint eslint-plugin-mdx @anolilab/eslint-config
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.cjs. Of course, we also provide a recommended Prettier configuration for your reference.
@anolilab/eslint-config
does not include all style-related rules, so there is no need to install eslint-config-prettier
. Install prettier
and if you use VSCode
the related plugins.
Here is a .prettierrc.cjs
configuration used by Anolilab Team for reference only:
// .prettierrc.cjs
export default {
// max 120 characters per line
printWidth: 120,
// use 2 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: false,
// 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: 'all',
// 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',
// vue files script and style tags indentation
vueIndentScriptAndStyle: false,
// lf for newline
endOfLine: 'lf',
// formats quoted code embedded
embeddedLanguageFormatting: 'auto',
};
If you are using experimental features such as class fields with JavaScript files you should install babel-eslint
.
npm install --save-dev babel-eslint
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.
These plugins will be loaded in based on your project dependencies
in package.json
. If a supported library is part of your project then it’s related esLint plugins will be loaded. The following packages are supported:
The following esLint plugins enforce good coding practices:
These plugins add code security rules to esLint:
Test plugins are loaded based on which testing tools you have listed in devDependencies
of package.json
. The following test plugins are supported:
- 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-radar
- 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": [
"javascript",
"javascriptreact",
"vue",
"typescript",
"typescriptreact"
]
}
If you want to enable auto-fix-on-save, you need to set your .vscode/settings.json
like this:
{
"eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
A best practice for VSCode is to auto format code with Prettier and autofix errors with ESLint by setting .vscode/settings.json
to this:
{
"files.eol": "\n",
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
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.
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.