Linting in Webpack


Michael Yin

Full Stack Developer

Last updated on Apr 28 2021


Table of Contents

Django + Webpack Series:

  1. Introduction
  2. Setup Webpack Project with Django
  3. Load Webpack bundles in Django
  4. Linting in Webpack (this article)
  5. Loading Webpack hash bundle in Django (coming soon)
  6. Code splitting with Webpack (coming soon)
  7. How to use webpack-dev-server with Django to support HMR (coming soon)
  8. How to load Webpack bundle in Django without using 3-party package (coming soon)

Objective

By the end of this chapter, you should be able to:

  1. Use Eslint and Webpack to check code style of JS.
  2. Use Stylelint and Webpack to check code style of SCSS, CSS.

ESLint

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code

Let's check webpack/webpack.config.dev.js

{
  test: /\.js$/,
  include: Path.resolve(__dirname, '../src'),
  enforce: 'pre',
  loader: 'eslint-loader',
  options: {
    emitWarning: true,
  },
},

Notes:

  1. eslint-loader will use eslint to check js files in src directory.
  2. You can check eslint-loader Github to learn more.

If we check frontend/.eslintrc

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "rules": {
    "semi": 2
  }
}

Notes:

  1. This is the config file of the eslint and we edit it as we like.
  2. You can check ESLint doc to learn more.

If we want to ask the eslint to help us fix the code automatically, check code below:

module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true,
        },
      },
    ],
  },
};
  1. The fix in options can save us a lot of time.

Stylelint

Stylelint A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

Let's check webpack/webpack.config.dev.js

plugins: [
  new StylelintPlugin({
    files: Path.join('src', '**/*.s?(a|c)ss'),
  }),
],

The StylelintPlugin would be used to check SCSS, CSS files.

Plugins expose the full potential of the webpack engine to third-party developers. Using staged build callbacks, developers can introduce their own behaviors into the webpack build process. Building plugins is a bit more advanced than building loaders, because you'll need to understand some of the webpack low-level internals to hook into them. Be prepared to read some source code!

Let's check frontend/.stylelintrc.json

{
  "extends": "stylelint-config-standard"
}

This is the config file for StyleLint

Note: To make StyleLint work better with SCSS, you might need to check stylelint-scss

If we want to ask the stylelint to help fix the code, check code below:

plugins: [
  new StylelintPlugin({
    files: Path.join('src', '**/*.s?(a|c)ss'),
    fix: true,
  }),
],

Notes:

  1. Webpack plugin is more advanced than Webpack loader.
  2. When I write this chapter, eslint-loader is deprecated. And eslint-webpack-plugin is recommended.

Conclusion

Django + Webpack Series:

  1. Introduction
  2. Setup Webpack Project with Django
  3. Load Webpack bundles in Django
  4. Linting in Webpack (this article)
  5. Loading Webpack hash bundle in Django (coming soon)
  6. Code splitting with Webpack (coming soon)
  7. How to use webpack-dev-server with Django to support HMR (coming soon)
  8. How to load Webpack bundle in Django without using 3-party package (coming soon)

Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, Wagtail CMS and React.

He has published some ebooks on leanpub and tech course on testdriven.io.

He is also the founder of the AccordBox which provides the web development services.


Table of Contents

This book will teach you how to build a modern blog with Wagtail CMS

Read More

Subscribe

Get notified about new great Web Development Tutorial