Commit 791999a2 authored by 刘祺's avatar 刘祺 Committed by Evan You

docs: add doc for using with stylelint (#1343)

parent 64af0791
# Linting # Linting
## ESLint
The official [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) supports linting both the template and script parts of Vue single file components. The official [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) supports linting both the template and script parts of Vue single file components.
Make sure to use the plugin's included config in your ESLint config: Make sure to use the plugin's included config in your ESLint config:
...@@ -43,3 +45,35 @@ module.exports = { ...@@ -43,3 +45,35 @@ module.exports = {
} }
} }
``` ```
## stylelint
[stylelint](https://stylelint.io) supports linting style parts of Vue single file components.
[Make sure that your stylelint config is right.](https://stylelint.io/user-guide/configuration/)
Then from the command line:
``` bash
stylelint MyComponent.vue
```
Another option is using [stylelint-webpack-plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin):
``` bash
npm install -D stylelint-webpack-plugin
```
Make sure it's applied as a plugin:
``` js
// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ... other options
plugins: [
new StyleLintPlugin({
files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
})
]
}
```
# Статический анализ кода # Статический анализ кода
## ESLint
Официальный плагин [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue. Официальный плагин [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.
Убедитесь, что используете поставляемую с плагином конфигурацию в вашей конфигурации ESLint: Убедитесь, что используете поставляемую с плагином конфигурацию в вашей конфигурации ESLint:
...@@ -43,3 +45,35 @@ module.exports = { ...@@ -43,3 +45,35 @@ module.exports = {
} }
} }
``` ```
## stylelint
[stylelint](https://stylelint.io) поддерживает проверку секций стилей в однофайловых компонентах Vue.
[Убедитесь, что ваша конфигурация stylelint корректна.](https://stylelint.io/user-guide/configuration/)
Затем выполните в командной строке:
``` bash
stylelint MyComponent.vue
```
Вы также можете использовать плагин [stylelint-webpack-plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin):
``` bash
npm install -D stylelint-webpack-plugin
```
Убедитесь, что добавили плагин в конфигурацию:
``` js
// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ... другие настройки
plugins: [
new StyleLintPlugin({
files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
})
]
}
```
# 代码校验 (Linting) # 代码校验 (Linting)
## ESLint
官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。 官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。
请确认在你的 ESLint 配置文件中使用该插件要导入的配置: 请确认在你的 ESLint 配置文件中使用该插件要导入的配置:
...@@ -43,3 +45,35 @@ module.exports = { ...@@ -43,3 +45,35 @@ module.exports = {
} }
} }
``` ```
## stylelint
[stylelint](https://stylelint.io) 支持在 Vue 单文件组件的样式部分的代码校验。
[请确认在你的 stylelint 配置文件正确。](https://stylelint.io/user-guide/configuration/)
接下来从命令行运行:
``` bash
stylelint MyComponent.vue
```
另一个选项是使用 [stylelint-webpack-plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin):
``` bash
npm install -D stylelint-webpack-plugin
```
请确保它是作为一个插件运用的:
``` js
// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ... 其它选项
plugins: [
new StyleLintPlugin({
files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
})
]
}
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment