代碼校驗可以保持代碼的統一性以及追蹤語法錯誤。.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`。