代码校验可以保持代码的统一性以及追踪语法错误。.vue 文件可以通过使用 `eslint-plugin-html`插件来校验代码。你可以通过 `vue-cli` 来开始你的项目，`vue-cli` 默认会开启代码校验功能。 ### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#为什么-12)为什么？ * 保证所有的开发者使用同样的编码规范。 * 更早的感知到语法错误。 ### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#怎么做-11)怎么做？ 为了校验工具能够校验 `*.vue`文件，你需要将代码编写在 `<script>`标签中，并使[组件表达式简单化](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#%E4%BF%9D%E6%8C%81%E7%BB%84%E4%BB%B6%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%AE%80%E5%8D%95%E5%8C%96)，因为校验工具无法理解行内表达式，配置校验工具可以访问全局变量 `vue` 和组件的 `props`。 #### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#eslint)ESLint [ESLint](http://eslint.org/) 需要通过 [ESLint HTML 插件](https://github.com/BenoitZugmeyer/eslint-plugin-html#eslint-plugin-html)来抽取组件中的代码。 通过 `.eslintrc` 文件来配置 ESlint，这样 IDE 可以更好的理解校验配置项： ```source-json { "extends": "eslint:recommended", "plugins": ["html"], "env": { "browser": true }, "globals": { "opts": true, "vue": true } } ``` 运行 ESLint ```source-shell eslint src/**/*.vue ``` #### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#jshint)JSHint [JSHint](http://jshint.com/) 可以解析 HTML（使用 `--extra-ext`命令参数）和抽取代码（使用 `--extract=auto`命令参数）。 通过 `.jshintrc` 文件来配置 ESlint，这样 IDE 可以更好的理解校验配置项。 ```source-json { "browser": true, "predef": ["opts", "vue"] } ``` 运行 JSHint ```source-shell jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/ ``` 注：JSHint 不接受 `vue` 扩展名的文件，只支持 `html`。