Gatsby set sass lint

user_1673376 0
Viewed 90

I want sass linter in Gatsby's project

plugins: [
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-contentful`,
      options: {
      },
    },

    {
      resolve: "gatsby-plugin-eslint",
      options: {
       
      },
    },
    `gatsby-plugin-sass`
  ],

How to include it? I want to detect incorrect CSS rules etc...

gatsby node.js sass lint css
1 Answers

ESlint is a JavaScript linter, so it can't analyze nor lint your Sass code.

However, you can use Stylelint to parse SCSS, Saas, or CSS files.

You can follow the default configuration steps in their GitHub:

  1. Install it by: 
    npm install --save --dev @primer/stylelint-config
  2. Add a stylelintrc.json file in the root of your project (it can be a .yml or .js format too if needed)
  3. Add your configuration rules. You can inherit from the default ones by using the extends rule as: 
    {
 "extends": "stylelint-config-standard",
 "rules": {
   "indentation": "tab",
   "number-leading-zero": null
 }
}
  4. Customize your commands to trigger your lint rules (change the file extension accordingly): 
    npx stylelint "**/*.css"

Resources:

user_55853710
Related