eslint-config-universe

What is eslint-config-universe?

eslint-config-universe is an ESLint configuration package designed to provide a comprehensive set of linting rules for JavaScript and TypeScript projects. It is particularly tailored for projects using React, React Native, and Expo, offering a consistent coding style and best practices.

What are eslint-config-universe's main functionalities?

JavaScript Linting

This feature provides a set of linting rules for JavaScript projects, ensuring code quality and consistency. The configuration extends from 'universe/native', which includes rules for React Native projects.

{ "extends": ["universe/native"] }

TypeScript Linting

This feature adds TypeScript-specific linting rules on top of the JavaScript rules, helping developers catch type-related errors and enforce best practices in TypeScript codebases.

{ "extends": ["universe/native", "universe/shared/typescript-analysis"] }

React and React Native Support

The package includes specific rules for React and React Native projects, promoting best practices and preventing common pitfalls in these environments.

{ "extends": ["universe/native"] }

Other packages similar to eslint-config-universe

eslint-config-airbnb

eslint-config-airbnb is a popular ESLint configuration that enforces Airbnb's JavaScript style guide. It is widely used in the industry and provides a comprehensive set of rules for JavaScript and React projects. Compared to eslint-config-universe, it does not specifically cater to React Native or Expo projects.

eslint-config-standard

eslint-config-standard is another widely used ESLint configuration that enforces JavaScript Standard Style. It is simpler and less opinionated than eslint-config-airbnb, making it a good choice for projects that prefer a more minimalistic approach. Unlike eslint-config-universe, it does not provide specific support for TypeScript or React Native.

eslint-config-prettier

eslint-config-prettier is designed to disable ESLint rules that conflict with Prettier, a popular code formatter. It is often used in conjunction with other ESLint configurations to ensure that code formatting is handled by Prettier. While it complements eslint-config-universe, it does not provide its own set of linting rules.

README

eslint-config-universe

Shared ESLint configs for internal Expo projects.

Installation

yarn add --dev eslint-config-universe

You will also need to install eslint and prettier:

yarn add --dev eslint@8 prettier

Usage

Import this config into your own ESLint configuration using the extends option. ESLint checks both package.json and .eslintrc.* files for its configuration:

package.json

{
  "eslintConfig": {
    // Choose from universe/native, universe/node, universe/web
    "extends": "universe"
  }
}

.eslintrc.js

module.exports = {
  extends: 'universe',
};

Customizing Prettier

If you would like to customize the Prettier settings, create a file named .prettierrc in your project directory. An example of Prettier configuration file:

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSameLine": true
}

Read more about configuring prettier and all of the available options.

Support for Different Platforms

There are several configs for different platforms. They are:

• universe: the basic config for JavaScript projects for which there isn't a more specific config,
• universe/native: the config for React Native projects, including Expo projects, with support for React and JSX,
• universe/web: the config for code that runs in web browsers, with support for React and JSX,
• universe/node: the config for code that runs in Node.

For an Expo project, your configuration might look like this:

"eslintConfig": {
  "extends": "universe/native"
}

You also can extend multiple configs, which is useful for projects that span several platforms:

"eslintConfig": {
  "extends": ["universe/node", "universe/web"]
}

Optional Additional TypeScript Typed Linting

Universe also provides optional additional config for typescript-eslint rules that make use of the parsed type information. Note that this may increase the time it takes to run lint for large projects. More information can be found at TypeScript ESLint website.

To enable the additional config, the following changes to your config are required:

.eslintrc.js

module.exports = {
  extends: [
    'universe',
+   'universe/shared/typescript-analysis',
  ],
+ overrides: [
+   {
+     files: [
+       '*.ts',
+       '*.tsx',
+       '*.d.ts'
+     ],
+     parserOptions: {
+       project: './tsconfig.json'
+     },
+   },
+ ],
};

More information on parserOptions.project option can be found in the typescript-eslint repository.

Philosophy

This config is designed to mark severe problems (ex: syntax errors) as errors and stylistic issues as warnings. This lets your team apply policies like, "make sure a commit has no errors but ignore warnings if the commit didn't introduce them."

It's also designed to be a more lenient config for teams who are stronger at decision-making and have a culture of osmotically learning coding guidelines and benefit more from flexibility than rigid rules.