Metastreet frontend style guide
npm install @metastreet/fe-style-guidefe-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:
``bash`
npm install -D @metastreet/fe-style-guide
or
`bash`
yarn add -D @metastreet/fe-style-guide
or
`bash`
pnpm add -D @metastreet/fe-style-guide
Create a file named eslint.config.mjs in your root folder and copy the following configuration.
`javascript
import msConfig from '@metastreet/fe-style-guide';
import { defineConfig } from 'eslint/config';
const config = defineConfig(msConfig);
export default config;
`
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.settings.json
2. Create a file inside it named .
3. Paste the following settings:
`json``
{
"[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!