stylelint

stylelint是一个开源CSS样式检查工具。相似ESLint，可以集成在VSCode中，自动检查和自动修复。下面详情一下在VSCode中的使用方法。

安装和使用步骤

1、在工程里安装stylelint。同时推荐安装stylelint-config-standard和stylelint-webpack-plugin。直接执行npm install stylelint stylelint-config-standard stylelint-webpack-plugin - -save-d 。其中stylelint-config-standard是官方推荐的标准规则配置，一般情况直接遵守标准规则就可。stylelint-webpack-plugin是webpack打包时使用的扩展组件。

2、在工程目录下增加stylelint.config.js文件，用于规则的配置module.exports = { "extends": "stylelint-config-standard", "rules": { "selector-pseudo-element-no-unknown": [ true, { "ignorePseudoElements": [ "v-deep" ] } ] }}

其中extends是引入的规则定义扩展。rules是自己配置的规则，比方stylelint不识别vue里的v-deep指令，这是设置忽略该告警

3、在VSCode的插件市场里搜索stylelint并安装

4、设置在VSCode中自动修复stylelint错误，在setting.json中添加如下配置就可。"editor.codeActionsOnSave": { "source.fixAll.stylelint": true},

5、上述配置完成后，在VSCode中即可以查看到具体的stylelint检查结果了。编辑窗口红色波浪线示警，鼠标悬停后提醒错误信息，底部问题窗口会显示错误信息。

6、大部分的问题stylelint在保存是会自动修复，同时还有补齐和格式话的功能。不能自动修复的手工修改一下。stylelint官网：https://stylelint.io/

Vue代码提醒插件

VSCode插件市场里相关插件非常多，可以自行选用。这里推荐两款比较好用的插件。

VueHelper

可能是目前VSCode最好的vue代码提醒插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码提醒。插件官网：https://marketplace.visualstudio.com/items?itemName=oysun.vuehelper

vue-helper

主要亮点是支持 Element-UI, VUX, IVIEW的代码提醒，使用上述UI组件的的项目推荐使用。插件官网：https://marketplace.visualstudio.com/items?itemName=shenjiaolong.vue-helper

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue