# 代码校验 (Linting)
# ESLint
官方的 eslint-plugin-vue 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。
请确认在你的 ESLint 配置文件中使用该插件要导入的配置：
// .eslintrc.js module.exports = { extends: [ "plugin:vue/essential" ] } 接下来从命令行运行：
eslint --ext js,vue MyComponent.vue 另一个选项是使用 eslint-loader 那么你的 *.vue 文件在开发过程中每次保存的时候就会自动进行代码校验：
npm install -D eslint eslint-loader 请确保它是作为一个 pre-loader 运用的：
// webpack.config.js module.exports = { // ... 其它选项 module: { rules: [ { enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /node_modules/ } ] } } # stylelint
stylelint 支持在 Vue 单文件组件的样式部分的代码校验。
接下来从命令行运行：
stylelint MyComponent.vue 另一个选项是使用 stylelint-webpack-plugin:
npm install -D stylelint-webpack-plugin 请确保它是作为一个插件运用的：
// webpack.config.js const StyleLintPlugin = require('stylelint-webpack-plugin'); module.exports = { // ... 其它选项 plugins: [ new StyleLintPlugin({ files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'], }) ] }