From 5a6a6026a14de68ff91f273bbaa7608541239c82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E7=A5=BA?= Date: Tue, 12 Jun 2018 20:40:42 +0800 Subject: [PATCH 1/2] Add doc for `stylelint`. --- docs/guide/linting.md | 34 ++++++++++++++++++++++++++++++++++ docs/ru/guide/linting.md | 34 ++++++++++++++++++++++++++++++++++ docs/zh/guide/linting.md | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 102 insertions(+) diff --git a/docs/guide/linting.md b/docs/guide/linting.md index a14c4c245..1ddce3425 100644 --- a/docs/guide/linting.md +++ b/docs/guide/linting.md @@ -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: @@ -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}'], + }) + ] +} +``` diff --git a/docs/ru/guide/linting.md b/docs/ru/guide/linting.md index 888ed8dde..1e025b7ed 100644 --- a/docs/ru/guide/linting.md +++ b/docs/ru/guide/linting.md @@ -1,5 +1,7 @@ # Статический анализ кода +## ESLint + Официальный плагин [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue. Убедитесь, что используете поставляемую с плагином конфигурацию в вашей конфигурации ESLint: @@ -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/) + +Затем в командной строке: + +``` bash +stylelint MyComponent.vue +``` + +Другим вариантом использования будет [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 = { + // ... другие настройки + plugins: [ + new StyleLintPlugin({ + files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'], + }) + ] +} +``` diff --git a/docs/zh/guide/linting.md b/docs/zh/guide/linting.md index e8b4082e7..83fcb74b2 100644 --- a/docs/zh/guide/linting.md +++ b/docs/zh/guide/linting.md @@ -1,5 +1,7 @@ # 代码校验 (Linting) +## ESLint + 官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。 请确认在你的 ESLint 配置文件中使用该插件要导入的配置: @@ -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}'], + }) + ] +} +``` From 92291b3be761cb4b740e60310b5d220db0ba8c35 Mon Sep 17 00:00:00 2001 From: Alexander Sokolov Date: Tue, 3 Jul 2018 09:31:17 +0300 Subject: [PATCH 2/2] Update linting.md --- docs/ru/guide/linting.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/ru/guide/linting.md b/docs/ru/guide/linting.md index 1e025b7ed..c8c044333 100644 --- a/docs/ru/guide/linting.md +++ b/docs/ru/guide/linting.md @@ -47,23 +47,23 @@ module.exports = { ``` ## stylelint -[stylelint](https://stylelint.io) supports linting style parts of Vue single file components. +[stylelint](https://stylelint.io) поддерживает проверку секций стилей в однофайловых компонентах Vue. -[Make sure that your stylelint config is right.](https://stylelint.io/user-guide/configuration/) +[Убедитесь, что ваша конфигурация stylelint корректна.](https://stylelint.io/user-guide/configuration/) -Затем в командной строке: +Затем выполните в командной строке: ``` bash stylelint MyComponent.vue ``` -Другим вариантом использования будет [stylelint-webpack-plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin): +Вы также можете использовать плагин [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