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.
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
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',
},
};
fe-style-guide
can be seamlessly integrated with Vscode, Although you may need to setup its settings:
-
Create a folder names
.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!