Linting in Webpack

Michael Yin

Last updated on April 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. Load Webpack hash bundle in Django
  6. Code splitting with Webpack
  7. How to config HMR with Webpack and Django
  8. How to use HtmlWebpackPlugin to load Webpack bundle in Django

If you want a quick start with Webpack and Django, please check python-webpack-boilerplate

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. Load Webpack hash bundle in Django
  6. Code splitting with Webpack
  7. How to config HMR with Webpack and Django
  8. How to use HtmlWebpackPlugin to load Webpack bundle in Django

If you want a quick start with Webpack and Django, please check python-webpack-boilerplate

Launch Products Faster with Django

SaaS Hammer helps you launch products in faster way. It contains all the foundations you need so you can focus on your product.

Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, and modern frontend tech.

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

Django SaaS Template

It aims to save your time and money building your product, developed by Michael Yin

Learn More

Build Jamstack web app with Next.js and Wagtail CMS.

Read More

Subscribe

Get notified about new great Web Development Tutorial