Gastby with ESLint, Prettier, Stylelint, Emotion Styled Components, Tailwindcss Basic Configs.

gatsby-setup-prettier-eslint-emotion-tailwindcss.md

Gastby with ESLint, Prettier, Stylelint, Emotion Styled Components, Tailwindcss

basic configs for a new Gatsby build

Install Prettier & ESLint Dev Dependencies

npm i -D babel-eslint babel-preset-gatsby eslint eslint-config-airbnb eslint-config-prettier eslint-config-wesbos eslint-plugin-html eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

Install Tailwind, Emotion, Emotion Styled Components & Twin Macro Dependencies

Breaking Changes in Emotion 11

Emotion 11 adds breaking changes to gatsby-plugin-emotion. Will need to update when fix is merged.

• Gatsby issue

npm i -S @emotion/core @emotion/styled gatsby-plugin-emotion postcss postcss-import postcss-preset-env tailwindcss twin.macro

NVM Config

Create .nvmrc in root

• default node
• example: 14.12.0

Prettier Configs

Create .prettierrc in root

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

Create .prettierignore in root

node_modules/ .cache/

Babel Config

Create .babelrc in root

{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "Firefox ESR"]
        }
      }
    ]
  ]
}

ENV Config (dotenv)

npm i -S dotenv

Create .env in root

• environment variables, secrets in this file

Config in gatsby-config.js

• add to top of file

require('dotenv').config({
  path: `.env.GATSBY_CONCURRENT_DOWNLOAD`,
})

// require .env.development or .env.production
require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

Create PostCSS Config

Create postcss.config.js in root

module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.config.js'),
    require('postcss-import')({
      plugins: [require('stylelint-config-recommended')],
    }),
    require('postcss-preset-env')({
      autoprefixer: { grid: false },
      features: {
        'nesting-rules': true,
      },
      browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
    }),
  ],
}

Create Tailwind Config

Create tailwind.config.js in root

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {
      screens: {
        sm: '640px',
        // => @media (min-width: 640px) { ... }

        md: '768px',
        // => @media (min-width: 768px) { ... }

        lg: '1024px',
        // => @media (min-width: 1024px) { ... }

        xl: '1280px',
        // => @media (min-width: 1280px) { ... }
      },
      gridAutoColumns: {
        '3fr': 'minmax(0, 3fr)',
      },
    },
  },
  variants: {},
  plugins: [],
}

---

Optional Configs

SVG in React Components

Gatsby Plugin React SVG Docs

npm i gatsby-plugin-react-svg

Config in gatsby-config.js

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /\.inline\.svg$/
    }
  }
}

// Use imported SVGs as components
import Something from "./path/something.inline.svg";
<Something className="your-class" />;

Install Google Fonts for Gatsby

npm i gatsby-plugin-google-fonts

Config in gatsby-config.js

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `kufam:wght@600;700;900`, // you can also specify font weights and styles
      `poppins:wght@400;500;600`, // you can also specify font weights and styles
      `montserrat:wght@400;500;600`, // you can also specify font weights and styles
    ],
    display: 'swap',
  },
}

Sourcing Options

Sourcing from WordPress

• WordPress Gatsby Sourcing Docs
• gatsby-source-wordpress Docs
• WordPress Example Starter

Install Required WP Plugins

Download zip into WP plugins directory

• WPGraphQL
• WP Gatsby

Setup Gatsby Config for WP sourcing

npm i gatsby-source-wordpress-experimental

Config in gatsby-config.js

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-source-wordpress-experimental`,
      options: {
        url:
          // allows a fallback url if WPGRAPHQL_URL is not set in the env, this may be a local or remote WP instance.
          process.env.WPGRAPHQL_URL || `https://localhost/graphql`,
        schema: {
          // Prefixes all WP Types with "Wp" so "Post and allPost" become "WpPost and allWpPost".
          typePrefix: `Wp`,
        },
        verbose: true,
        develop: {
          // caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
          hardCacheMediaFiles: true,
        },
        debug: {
          graphql: {
            writeQueriesToDisk: true,
          },
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
      },
    },
  ]
}

Optional Stylelint for project

Install Stylelint Recommended Config Dev Dependencies

npm i -D stylelint-config-recommended

Create Stylelint Config

Create stylelint.config.js in root

module.exports = {
  rules: {
    extends: ['stylelint-config-recommended'],
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'variants',
          'responsive',
          'screen',
        ],
      },
    ],
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null,
  },
}