@metastreet/fe-style-guide v1.0.11

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:

1. Create a folder named .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!