Adding ESLint, Prettier, and Stylelint

We recommend enabling linting

Sage 10 no longer includes linting styles or scripts out of the box. We highly recommend adding and configuring ESLint, Prettier, and Stylelint based on your needs.

Bud has several extensions that can be added to your theme dependencies to help with linting. To add ESLint, Prettier, and Stylelint to your theme, run:

yarn add @roots/bud-eslint -D
yarn add @roots/bud-prettier -D 
yarn add @roots/bud-stylelint -D
yarn add @roots/eslint-config -D

Add scripts to package.json for better access to linting your scripts and styles:

...
"scripts": {
  "lint": "yarn lint:js && yarn lint:css",
  "lint:js": "eslint resources/scripts",
  "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
  "test": "yarn lint",
}
...

Then create new files for .eslintrc.cjs, .prettierrc, and .stylelintrc.

.eslintrc.cjs:

module.exports = {
  root: true,
  extends: ['@roots/eslint-config/sage'],
};

.prettierrc:

{
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false
}

.stylelintrc:

{
  "extends": [
    "@roots/sage/stylelint-config",
    "@roots/bud-tailwindcss/stylelint-config"
  ]
}