Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add doc for stylelint #1343

Merged
merged 3 commits into from
Jul 3, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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}'],
})
]
}
```