Linting in Webpack

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