代码校验 (Linting)

ESLint

官方的 eslint-plugin-vue 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。

请确认在你的 ESLint 配置文件中使用该插件要导入的配置：

  1. // .eslintrc.js
  2. module.exports = {
  3.   extends: [
  4.     "plugin:vue/essential"
  5.   ]
  6. }

接下来从命令行运行：

  1. eslint --ext js,vue MyComponent.vue

另一个选项是使用 eslint-loader 那么你的 *.vue 文件在开发过程中每次保存的时候就会自动进行代码校验：

  1. npm install -D eslint eslint-loader

请确保它是作为一个 pre-loader 运用的：

  1. // webpack.config.js
  2. module.exports = {
  3.   // ... 其它选项
  4.   module: {
  5.     rules: [
  6.       {
  7.         enforce: 'pre',
  8.         test: /\.(js|vue)$/,
  9.         loader: 'eslint-loader',
  10.         exclude: /node_modules/
  11.       }
  12.     ]
  13.   }
  14. }

stylelint

stylelint 支持在 Vue 单文件组件的样式部分的代码校验。

请确认在你的 stylelint 配置文件正确。

接下来从命令行运行：

  1. stylelint MyComponent.vue

另一个选项是使用 stylelint-webpack-plugin:

  1. npm install -D stylelint-webpack-plugin

请确保它是作为一个插件运用的：

  1. // webpack.config.js
  2. const StyleLintPlugin = require('stylelint-webpack-plugin');
  3. module.exports = {
  4.   // ... 其它选项
  5.   plugins: [
  6.     new StyleLintPlugin({
  7.       files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
  8.     })
  9.   ]
  10. }

原文: https://vue-loader.vuejs.org/zh/guide/linting.html