专栏名称: Eliaz
js
目录
相关文章推荐
国家外汇管理局  ·  国家外汇管理局公布2025年1月银行结售汇和 ... ·  12 小时前  
国家外汇管理局  ·  再见亚冬 便利化支付服务与您一路同行 ·  昨天  
国家外汇管理局  ·  习近平:民营经济发展前景广阔大有可为 ... ·  昨天  
常观  ·  理想汽车官宣:落地常州! ·  2 天前  
常观  ·  理想汽车官宣:落地常州! ·  2 天前  
51好读  ›  专栏  ›  Eliaz

Stylelint in .vue

Eliaz  · 掘金  ·  · 2017-12-11 03:08

正文

Stylelint

个人理解上 stylelint 是一个css代码linter的工具,可以结合nodejs和cli进行使用。继csslinter等linter之后,具有插件化的功能,同postcss的插件,webpack等都可以较好的集成进去。

如果说js的代码检测和规范工具在jslint,jshint之后,你肯定听说过eslint。同eslint对js代码校验规则一样,stylelint也有一套类似的处理系统.

TL;DR

1.使用 vue-cli 初始化一个工程

2. npm i stylelint stylelint-config-standard -D

3.在工程的根目录下建立 stylelint.config.js 文件,将以下内容复制进去。

module.exports = {
  "extends": "stylelint-config-standard",
  "rules": {
  }
}

4.打开package.json在scripts中插入

"scripts": {
    // 表示对所有的.vue文件使用自定义的syntax去parse,自定义的syntax module就是postcss-html,并且使用--fix自动修复选项,去修复一些可以修复的规则。
  "lintcss:fix": "stylelint **/*.vue --custom-syntax postcss-html --fix"
}

5.控制台执行 npm run lintcss:fix ,在控制台看输出,能够修改的都会被修改(比如大写的16进制颜色会被转成小写),不能被修改的就需要手动修改问题,根据提示修改即可.


安装

建议是本地安装,每个项目都重新安装一遍。

npm i stylelint -D

因为不是全局安装( -g 安装),所以一般调用的话需要借助 npm scripts ,如果这个没玩过,先去查阅相关资料.

// in package.json

···
···

{
  "scripts": {
    "lintcss": "stylelint **/*.css -s scss"
  }
}

···

先说一个大的前提,很重要.

  • stylelint自动忽略 node_modules bower_modules 下的linter校验.
  • stylelint对文件名为css,.scss, .sass等具有后缀的文件自动采用相关的syntax去解析,比如css是使用css,scss使用scss.如果你想要对.css文件采用scss的语法去linter,就如上面你说些,使用 -s 或者 --syntax 的选项去重新指定加载的 syntax .
  • stylelint 不能以文件夹作为stdin(不能src/,需要指定为src/*.scss),也没有指定后缀名(eslint中--ext的功能)。如在eslint中使用 eslint -ext .js,.vue 就可以对指定类型的文件进行linter

规则

一般需要在项目根目录建立一个有关stylelint的配置文件

  • a stylelint property in package.json
  • a .stylelintrc file
  • a stylelint.config.js file exporting a JS object

对比eslint,eslint有.eslintrc.js

bebel用的就是 .babelrc

所以stylelint我习惯上使用在根目录建立一个 stylelint.config.js 的文件,以module.exports的方式,输出一些配置规则。

看下我工程中的配置。下面的 stylelint-config-standard stylelint-order 需要安装。

module.exports = {
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "declarations",
      "custom-properties",
      "dollar-variables",
      "rules",
      "at-rules"
    ],

    ····
    ····
  }
}

一般 extends 是去继承一个规则,一般使用的是 stylelint-config-standard 这个库,这个库是官方推荐,也是很多大公司,比如facebook,google就是使用这套css规则.

这里我使用了一个排序的插件,等会再说。是针对css属性的位置书写生效的.

在编辑器中使用stylelint

刚刚写的都是基本的配置和一个介绍,是保证你能够在感知一个stylelint是一个什么东西的前提下写的。

如果想要在编辑器中使用stylelint,如 vscode ,就很简单,

1.在插件库中查找stylelint 2.根据插件的提示,修改一些用户设置。但我测试,在我现在的版本是不需要这些配置都可以生效的。 3.想在特殊的语言块中使用stylelint,比如vue文件中,加上如下的设置即可.

// 用户设置文件中. 文件->首选项->用户设置
// 让stylelint在vue组件中支持.
    "stylelint.additionalDocumentSelectors": [
        "vue"
    ]

stylelint会根据根目录中 stylelint.config.js 中的规则设置,去linter所有的.vue文件,提示相关的语法错误.

这样在coding 的时候就已经具有了自动提示错误的功能了.

自动修正

想象一下,eslint有--fix,同理stylelint也有--fix选项,不过stylelint的--fix只能修复一些问题,像大括号前面必须要有空格这些是不会自动帮你fix掉的,需要手动fix(官方文档说的也很清楚)

那这些都是对.css或者.scss,或者.sss等文件进行--fix,但是如果一个特殊的文件,如果也需要stylelint去linter,需要怎么做,官方文档说的也很明白,使用pre-processor,先使用预处理器对对应的文件进行--custom-syntax的parse处理。

强烈建议阅读

解析非标准的语法

相关讨论1

相关讨论2

看了相关的issue,大概上(从今天算)下个版本(vue-cli下的webpack的新模板)应该会集成stylelint的相关设置。

所以对vue文件的处理是

// package.json
{
  "scripts": {
    // 表示对所有的.vue文件使用自定义的syntax去parse,自定义的syntax module就是postcss-html,并且使用--fix自动修复选项,去修复一些可以修复的规则。






请到「今天看啥」查看全文