1. vscode stylelint插件安装及配置
vscode stylelint插件版本
vscode中配置stylelint和开启自动修复
// 开启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依赖
pnpm add -D postcss postcss-html postcss-import postcss-scss stylelint stylelint-config-html stylelint-config-rational-order stylelint-config-recommended stylelint-config-standard stylelint-order
依赖简介
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配合使用
扩展
如何格式化 HTML、Vue（或其他后缀） 文件中的 HTML 代码？
.vue 文件的 HTML 代码可以使用 eslint-plugin-vue 插件来进行格式化：
extends: [
'plugin:vue/recommended', // 在 .eslintrc.js 文件中加上这一行代码
'@vue/airbnb',
]
其他的 HTML 文件需要利用 VSCode 自带的格式化。
- 踩坑
Unknown word (CssSyntaxError) 错误
问题主要是因为 stylelint 升级到 14 大版本造成的。
- 解决方案一
安装 stylelint 新的相关依赖：
pnpm add -D stylelint-config-recommended-vue stylelint-config-standard-scss postcss-html postcss-scss
然后修改 .stylelintrc.js 文件的配置项：
extends: [
'stylelint-config-standard-scss',
'stylelint-config-recommended-vue'
],
customSyntax: 'postcss-html',
overrides: [
{
files: ['**/*.{scss,css,sass}'], // css 相关文件由 postcss-scss 处理
customSyntax: 'postcss-scss'
},
]
这样修改以后，就不会再报错了。
如果出现 Cannot find module 'postcss-scss'错误，请将 node_modules package-lock.json 文件删了重新安装。
- 解决方案二
第二个解决方案就是将以上三个插件的版本降一个大版本就好了，最后的版本如下：
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0",
同时需要将 VSCode 的 stylelint 插件降级，现在插件的最新版本是 1.0.3，不支持 stylelint 13 版本。点击插件旁边的小齿轮，再点 Install Another Version
，选择其他版本进行安装。
选 0.87.6 版本安装就可以了，这时 css 自动格式化功能恢复正常。
3. 添加stylelint配置文件
module.exports = {
root: true,
plugins: ["stylelint-order"],
customSyntax: "postcss-html",
extends: [
'stylelint-config-standard-scss',
'stylelint-config-recommended-vue',
"stylelint-config-rational-order",
],
ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json"],
overrides: [
{
files: ["**/*.{scss,css,sass}"], // css 相关文件由 postcss-scss 处理
customSyntax: "postcss-scss"
},
{
files: ["*.vue", "**/*.vue", "*.html", "**/*.html"],
rules: {
"keyframes-name-pattern": null,
"selector-pseudo-class-no-unknown": [
true,
{
ignorePseudoClasses: ["deep", "global"]
}
],
"selector-pseudo-element-no-unknown": [
true,
{
ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]
}
]
}
}
],
rules: {
"selector-class-pattern": null,
"selector-pseudo-class-no-unknown": [
true,
{
ignorePseudoClasses: ["global"]
}
],
"selector-pseudo-element-no-unknown": [
true,
{
ignorePseudoElements: ["v-deep"]
}
],
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
"function",
"if",
"each",
"include",
"mixin"
]
}
],
"no-empty-source": null,
"named-grid-areas-no-invalid": null,
"unicode-bom": "never",
"no-descending-specificity": null,
"font-family-no-missing-generic-family-keyword": null,
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"rule-empty-line-before": [
"always",
{
ignore: ["after-comment", "first-nested"]
}
],
"unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
"order/order": [
[
"dollar-variables",
"custom-properties",
"at-rules",
"declarations",
{
type: "at-rule",
name: "supports"
},
{
type: "at-rule",
name: "media"
},
"rules"
],
{ severity: "warning" }
],
"order/properties-order": [
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"justify-content",
"align-items",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"border",
"border-style",
"border-width",
"border-color",
"border-top",
"border-top-style",
"border-top-width",
"border-top-color",
"border-right",
"border-right-style",
"border-right-width",
"border-right-color",
"border-bottom",
"border-bottom-style",
"border-bottom-width",
"border-bottom-color",
"border-left",
"border-left-style",
"border-left-width",
"border-left-color",
"border-radius",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"font-size",
"font-family",
"font-weight",
"text-align",
"text-justify",
"text-indent",
"text-overflow",
"text-decoration",
"white-space",
"color",
"background",
"background-position",
"background-repeat",
"background-size",
"background-color",
"background-clip",
"opacity",
"filter",
"list-style",
"outline",
"visibility",
"box-shadow",
"text-shadow",
"resize",
"transition"
]
}
};
eslint 格式化代码
本文用 Vue 项目做示范。
利用 Vue-CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。
安装插件 ESLint，然后 File -> Preference-> Settings（如果装了中文插件包应该是 文件 -> 选项 -> 设置），搜索 eslint，点击 Edit in setting.json
将以下选项添加到配置文件
"editor.codeActionsOnSave": {
"source.fixAll": true,
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
],
"eslint.alwaysShowStatus": true,
"stylelint.validate": [
"css",
"less",
"postcss",
"scss",
"vue",
"sass"
]
同时要确保 VSCode 右下角的状态栏 ESlint 是处于工作状态的。如果右下角看不到 Eslint 的标识，请按照上面讲过的步骤打开 setting.json，加上这行代码：
"eslint.alwaysShowStatus": true
配置完之后，VSCode 会根据你当前项目下的 .eslintrc 文件的规则来验证和格式化代码。
TypeScript
下载插件
pnpm add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
在 .eslintrc 配置文件，添加以下两个配置项：
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
]
在根目录下的 package.json 文件的 scripts 选项里添加以下配置项：
"scripts": {
"lint": "eslint --ext .js,.ts,.tsx test/ src/",
}
如果你使用 Vue-CLI 创建项目，并且想要格式化 TypeScript 的代码，则需要在 .eslintrc.js 文件添加或修改以下几项：
parser: 'vue-eslint-parser',
plugins: [
'@typescript-eslint',
],
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
}
这样就可以格式化 .js .ts .vue 文件了。
