vscode 格式化 css nested vscodecss格式化插件

vscode stylelint使用

• 1. vscode stylelint插件安装及配置

• vscode stylelint插件版本
• vscode中配置stylelint和开启自动修复

• 2. 安装stylelint依赖
• 3. 添加stylelint配置文件
• 参考文章

记录使用vscode stylelint插件安装配置过程，完整配置stylelint格式化 .css/scss 文件，以及 .vue/html 文件中 <style lang=“scss”> 标签内样式的格式化配置。

1. vscode stylelint插件安装及配置

vscode stylelint插件版本

在vscode扩展中心搜索stylelint插件，直接安装最新版本

vscode中配置stylelint和开启自动修复

打开vscode配置文件，切换成json视图（settings.json）。

在配置文件中增加以下配置内容。

// 开启stylelint自动修复
"editor.codeActionsOnSave": {
  "source.fixAll": true, // 开启自动修复
  "source.fixAll.stylelint": true, // 开启stylelint自动修复
},
// 关闭编辑器内置样式检查（避免与stylelint冲突）
"css.validate": false,
"less.validate": false,
"scss.validate": false,
// 配置stylelint检查的文件类型范围
"stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],

2. 安装stylelint依赖

在项目中集成以下依赖包：

npm install stylelint -D
npm install stylelint-scss -D	
npm install stylelint-config-standard -D
npm install stylelint-config-standard-scss -D
npm install postcss -D
npm install postcss-html -D
npm install postcss-scss -D
npm install stylelint-order -D
npm install stylelint-config-rational-order -D

依赖简介

• stylelint ---- 主依赖
• stylelint-scss ---- stylelint的scss特定linting规则的集合
• stylelint-config-standard ---- stylelint的标准可共享配置
• stylelint-config-standard-scss ---- 针对scss的标准可共享配置。与stylelint-scss配合使用
• postcss ---- 用于postcss-html和postcss-scss的支持
• postcss-html ---- 解析<style>类 vue、html 文件标签中的样式
• postcss-scss ---- 解析<style lang=“scss”>下的scss样式
• stylelint-order ---- css属性排序规则插件，强制你按照某个顺序编写 css。例如：先写定位,再写盒模型,再写内容区样式,最后写 CSS3相关属性。
• stylelint-config-rational-order ---- 针对css属性排序的共享规则配置，避免长串css属性顺序规则书写。与stylelint-order配合使用

3. 添加stylelint配置文件

在项目根目录下创建stylelint.config.js文件（或.stylelintrc.json）配置以下内容。选用.js类型，是为了方便添加配置注释。

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-rational-order'
  ],
  plugins: ['stylelint-scss', 'stylelint-order'],
  overrides: [
    // 扫描.vue/html文件中的<style>标签内的样式
    {
      files: ['**/*.{vue,html}'],
      customSyntax: 'postcss-html'
    }
  ],
  // 覆盖配置（优先级大于config-standard）
  rules: {...}
}

到此，重启vscode即可使用。以下为使用stylelint后的格式错误提示（执行ctrl + s即可实现自动修复）：

报错填坑：

• <style>处的CssSyntaxError报错：缺少对<style>的解析，在stylelint.config.js中配置overrides对<style>的解析即可。
• 报opts.node.rangeBy is not a function错误：缺少postcss-scss依赖