@jamtastic/directus-standardish v0.9.0
Directus Code Standard ish
Shareable linting configuration for Directus extension projects. Designed to follow standards used in the official project with some potentially controversial caveats (ergo, "-ish"):
- No semi-colons 🫰^dyslexic
- Tabs Spaces 😄^dyslexic
The following
@typescript/*
rules are re-enabled or changed^typescript:no-explicit-any
no-var-require
no-non-null-assertion
is set to"warn"
(planned to set to error)ban-ts-comment
Prettier print width is set to
100
since eslint will handle the absolute max width (lines of code really should not go past 100 characters, and especially not 120)- Vue files have their
<script>
and<style>
tags indented to match the<template>
tags^dyslexic - Markdown prose no longer forcibly wraps (uses default value of
"preserve"
) - use your editors wrap features as forced wrapping is error prone - Addition of more rules that are currently
undefined
. They will be changed if the Directus project sets any of these rules.
^typescript: The Directus project already has these marked as for review and may eventually be the same as in this project anyway. Hopefully this is just getting ahead. ^dyslexic: The primary contributor to this project is slightly dyslexic and these settings help them greatly.
Installation
Install the package in your Directus project:
$ npm install -D @jamtastic/directus-standardish
Configure your editor
Note: These instructions are VSCode specific.
Install the following extensions:
Add the following to your .vscode/settings.json
file in your project:
{
"stylelint.validate": ["css", "less", "postcss", "vue"],
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
Usage
Note: This process is done automatically for new extensions in @jamtastic/directus when using the
bunny new
CLI command.
Add the following to your projects package.json
file:
{
"scripts": {
"fix": "npm run fix:code && npm run fix:code && npm run fix:style",
"fix:code": "eslint",
"fix:format": "prettier",
"fix:style": "stylelint **/*.{vue,css,scss,sass}",
"lint": "npm run lint:code && npm run lint:code && npm run lint:style",
"lint:code": "eslint",
"lint:format": "prettier",
"lint:style": "stylelint **/*.{vue,css,scss,sass}"
},
// ...
"eslintConfig": {
"extends": "@jamtastic/eslint-config-directus"
},
"prettier": "@jamtastic/directus-standardish/prettier",
"stylelint": {
"extends": "@jamtastic/directus-standardish/stylelint"
}
}
Other options
Using package.json
is the recommended way to use these config files however you may also extend the configuration by following the docs for each linting tool.
Stylelint (in a .stylelintrc
file):
extends:
- 'jamtastic/directus-standardish/stylelint'
rules: // your overrides here
1 year ago