Skip to content

Commit

Permalink
docs: add doc for using with stylelint (#1343)
Browse files Browse the repository at this point in the history
  • Loading branch information
gucong3000 authored and yyx990803 committed Jul 3, 2018
1 parent 64af079 commit 791999a
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 0 deletions.
34 changes: 34 additions & 0 deletions docs/guide/linting.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# 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.

Make sure to use the plugin's included config in your ESLint config:
Expand Down Expand Up @@ -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}'],
})
]
}
```
34 changes: 34 additions & 0 deletions docs/ru/guide/linting.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Статический анализ кода

## ESLint

Официальный плагин [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.

Убедитесь, что используете поставляемую с плагином конфигурацию в вашей конфигурации ESLint:
Expand Down Expand Up @@ -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}'],
})
]
}
```
34 changes: 34 additions & 0 deletions docs/zh/guide/linting.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# 代码校验 (Linting)

## ESLint

官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。

请确认在你的 ESLint 配置文件中使用该插件要导入的配置:
Expand Down Expand Up @@ -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}'],
})
]
}
```

0 comments on commit 791999a

Please sign in to comment.