@metastreet/fe-style-guide

Eslint quicksetup

fe-style-guide is an Eslint configuration for MetaStreet, created to prevent the repetitive task of copying style guidelines for each new project. By consolidating them into a single package, it offers easier maintenance and application.

Installation

You can install fe-style-guide using your preferred package manager:

npm install -D @metastreet/fe-style-guide

or

yarn add -D @metastreet/fe-style-guide

or

pnpm add -D @metastreet/fe-style-guide

Usage

Create a file named eslint.config.mjs in your root folder and copy the following configuration.

import msConfig from '@metastreet/fe-style-guide';
import { defineConfig } from 'eslint/config';

const config = defineConfig(msConfig);

export default config;

Integration

fe-style-guide can be seamlessly integrated with Vscode, Although you may need to setup its settings:

• Create a folder named .vscode in your workspace root.

• Create a file inside it named settings.json.

• Paste the following settings:

  {
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[typescript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[typescriptreact]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ]
  }
  

Happy coding!