@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 .eslintrc.js in your root folder and copy the following configuration.

// @ts-check

/** @type {import("eslint").Linter.Config} */
module.exports = {
  extends: [require.resolve('@metastreet/fe-style-guide/config')],
  parserOptions: {
    project: './tsconfig.json',
  },
};

Integration

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

1. Create a folder names .vscode in your workspace root.

2. Create a file inside it named settings.json

3. 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!