开箱即用的vue项目的stylelint和eslint验证背景 vite安装的项目一般都没有eslint和styleli

背景

vite安装的项目一般都没有eslint和stylelint配置，对于熟悉的项目配置的很简单。
如果对于新手来说或者不熟悉的来说，就有点麻烦了，所以就做了一个配置简单的包，供大家使用。

优点

开箱即用，配置方便，引入即可使用
自动修复格式，自动修复样式格式, 自动修复Vue组件style样式
适用于JavaScript、Vue
适用于Scss, Css, Less, Vue, Sass

用法

1. 安装

- vite + vue3

pnpm add @kvuse/stylelint-config @kvuse/eslint-config -D

- vueCli + vue2

pnpm add @kvuse/stylelint-config @kvuse/eslint-config-vue2 -D

2. 配置

根目录添加.eslintrc.json

vite + vue3

{
  "extends": ["@kvuse/eslint-config"]
}

vueCli + vue2

{
  "extends": ["@kvuse/eslint-config-vue2"]
}

根目录添加.stylelintrc.json

{
  "extends": ["@kvuse/stylelint-config"]
}

`vscode` 配置自动修复

安装 Vscode Eslint 和 Vscode Stylelint 插件
创建.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "less", "scss", "vue", "sass"],
}

一般到这一步，就可以使用了，如果还是没有效果，不要捉急，接着进行下面的操作。

其他问题

如果出现没有效果, 没有stylelint验证

安装stylelint
```
 pnpm install stylelint -D
```

如果出现没有效果, 没有eslint验证

安装eslint
```
 pnpm install eslint -D
```

添加其他规则

如果需要stylelint其他规则，请自行在.stylelintrc.json配置

{
  "extends": ["@kvuse/stylelint-config"],
  "rules":{
    // ...
  }
}

如果需要其他eslint规则，请自行在.stylelintrc.json配置
```
{
  "extends": ["@kvuse/stylelint-config"],
  "rules":{
    // ...
  }
}
```
这个时候你就能愉快的使用eslint和stylelint验证，有什么问题随时可以留言。

开箱即用的vue项目的stylelint和eslint验证

背景

优点

用法