Adding ESLint, Prettier, and Stylelint

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"
  ]
}