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..c8c044333 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) поддерживает проверку секций стилей в однофайловых компонентах 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}'], + }) + ] +} +``` 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}'], + }) + ] +} +```