Babel Plugin and StyleLint

Learn how to debug better using the Babel plugin and style better with Stylelint.

We'll cover the following

We’ve seen how Babel can bring new features like JSX syntax to JavaScript. But Babel’s language-bending abilities can also be used for subtler purposes, tailoring your code to the needs of specific libraries. That’s what the official styled-components Babel plugin does. It’s a recommended addition for any project that uses styled-components.

  • Install the plugin with npm:

    $ npm install --save-dev babel-plugin-styled-components@1.9.2
    + babel-plugin-styled-components@1.9.2
    
  • Then add it to your Babel config:

    // .babelrc.js
    module.exports = {
      presets: ['@babel/preset-react', '@babel/preset-env'],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        'babel-plugin-styled-components',
      ],
    };
    
  • Restart your dev server, and inspect the element again:

Get hands-on with 1200+ tech skills courses.