Using Stylelint in Your Vue.js Project

Question

Using Stylelint in Your Vue.js Project

Currently, I am in the process of incorporating stylelint into a new Vue project that I have just set up.

Initially, I believed it would be straightforward to utilize the Stylelint Webpack Plugin. However, upon running yarn serve, any encountered errors cause the entire operation to freeze without providing any output. On the other hand, if I execute yarn build, the build process fails as expected but only emits the message "There was a stylelint error".

The contents of my vue.config.js file are outlined below:

const stylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new stylelintPlugin({ files: ['**/*.(vue|scss)'] }),
    ],
  },
};

Displayed are the current versions from my package.json:

 "@vue/cli-service": "^3.9.0",
 "stylelint": "^10.1.0",
 "stylelint-config-recommended": "^2.2.0",
 "stylelint-scss": "^3.9.2",

javascript vue.js webpack vue-cli stylelint

Answer 1

Answer №1

Although it may be overdue, here are effective configurations using

stylelint-config-recommended-scss

.

This is an add-on to the third-party stylelint-scss plugin that must be installed alongside stylelint itself. It appears that stylelint-webpack-plugin was missing from your setup.

To install development dependencies:

# Remove unnecessary dependency (with NPM):
npm uninstall stylelint-config-recommended

# Or with Yarn:
yarn remove stylelint-config-recommended

# Install dev dependencies with NPM:
npm i -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin

# Or with Yarn:
yarn add -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin

In your vue.config.js:

const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new StyleLintPlugin({
        files: ['src/**/*.{vue,scss}'],
      }),
    ],
  },
};

Create a file stylelint.config.js in the root folder of your project:

module.exports = {
  extends: 'stylelint-config-recommended-scss',
  rules: {
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ]
  }
};

Add this lint:scss command in your package.json file (run with npm run lint:scss). This command attempts to auto-fix all rules, but please note that not all rules can be fixed automatically.

If there are errors that cannot be fixed, the script will display a list of error lines and exit. You will need to manually correct these errors and then rerun the script to ensure they have been resolved:

{
  "scripts": {
    "lint:scss": "stylelint ./src/**/*.{vue,scss} --fix"
  }
}

I hope this information proves helpful! Feel free to leave a comment if anything was overlooked.

Answer 2

Although it may be overdue, here are effective configurations using

stylelint-config-recommended-scss

.

This is an add-on to the third-party stylelint-scss plugin that must be installed alongside stylelint itself. It appears that stylelint-webpack-plugin was missing from your setup.

To install development dependencies:

# Remove unnecessary dependency (with NPM):
npm uninstall stylelint-config-recommended

# Or with Yarn:
yarn remove stylelint-config-recommended

# Install dev dependencies with NPM:
npm i -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin

# Or with Yarn:
yarn add -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin

In your vue.config.js:

const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new StyleLintPlugin({
        files: ['src/**/*.{vue,scss}'],
      }),
    ],
  },
};

Create a file stylelint.config.js in the root folder of your project:

module.exports = {
  extends: 'stylelint-config-recommended-scss',
  rules: {
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ]
  }
};

Add this lint:scss command in your package.json file (run with npm run lint:scss). This command attempts to auto-fix all rules, but please note that not all rules can be fixed automatically.

If there are errors that cannot be fixed, the script will display a list of error lines and exit. You will need to manually correct these errors and then rerun the script to ensure they have been resolved:

{
  "scripts": {
    "lint:scss": "stylelint ./src/**/*.{vue,scss} --fix"
  }
}

I hope this information proves helpful! Feel free to leave a comment if anything was overlooked.

Answer 3

Answer №2

My setup mirrors that of a fellow UX engineer, but when attempting to execute the command npm run lint:scss, I encountered an issue.

node_modules/stylelint/node_modules/get-stdin/index.js:13
for await (const chunk of stdin) {
            ^^^^^

SyntaxError: Unexpected reserved word

After investigation, it was discovered that the problem stemmed from using an outdated version of Node.js. It's important to ensure you are using the correct version.

Answer 4

My setup mirrors that of a fellow UX engineer, but when attempting to execute the command npm run lint:scss, I encountered an issue.

node_modules/stylelint/node_modules/get-stdin/index.js:13
for await (const chunk of stdin) {
            ^^^^^

SyntaxError: Unexpected reserved word

After investigation, it was discovered that the problem stemmed from using an outdated version of Node.js. It's important to ensure you are using the correct version.

Using Stylelint in Your Vue.js Project

Answer №1

Answer №2

Similar questions

Utilize React-router to display child components on the webpage

JavaScript combined with a dynamic menu, a customized current link style using CSS, and a site built on PHP

Chromium browsers exhibit strange behavior with AngularJS orderBy, causing issues with clearing sorting selections

Using a Javascript library within an Angular component: A comprehensive guide

Display a list of errors from an array in JavaScript or jQuery, and output them into a designated <

Updating Options in React JS Material UI Autocomplete

Using TypeScript with Watermelondb

Synchronizing Form Data in Angular 5: Pass and Populate Dropdowns between Components

Discover the steps to convert an image to base64 while circumventing the restrictions of the same-origin policy

Adding extra req.body properties to an existing post request in Express and then redirecting it can be done by modifying the req

Unforeseen issue encountered while utilizing node proxy

The VueJS Chosen directive fails to refresh when new options are selected

Implementing `block eval() in Content Security Policy header for an Angular 8 project

Is there a method available to minimize the size of a local storage list containing strings?

Mapping an array based on specific conditions

What is the best way to eliminate a JSON header?

Error: Trying to use 'Player' before it has been initialized

Executing a series of API calls using Rxjs in Angular that result in a null response

Is there a way to transform the searchParams function into an object? Changing from URLSearchParams { 'title' => '1' } to { title : 1 }

The Javascript Image() function fails to load or render