代碼規(guī)范和風(fēng)格指南
常見(jiàn)的“代碼標(biāo)準(zhǔn)”：
- JavaScript Standard Style
- Airbnb JavaScript Style Gulde
本次項(xiàng)目是使用的standard風(fēng)格
ESLint
如果需要團(tuán)隊(duì)都使用一種代碼風(fēng)格的話，就使用ESLint代碼校驗(yàn)工具進(jìn)行一個(gè)強(qiáng)制的約束
eslint的配置文件
有兩點(diǎn)需要注意：
- extends內(nèi)部的plugin:vue/essential 指的是vue官方提供的
eslint-plugin-vue - @vue/standard 指的是
@vue/eslint-config-standard
eslint-plugin-vue
- vue官方提供的ESLint插件
- 官方文檔：
- 用于查找
<template>嫡秕，<script>遵班，.vue文件中的- 語(yǔ)法錯(cuò)誤
- Vue.js指令的錯(cuò)誤用法
- 違反Vue風(fēng)格指南的代碼
@vue/eslint-config-standard
- 官方文檔：
- 這是一種無(wú)需配置，可以便捷的統(tǒng)一代碼風(fēng)格的方式亩鬼，具體可以參考官方文檔細(xì)則
主要需要注意的是：代碼不能有分號(hào)
全部設(shè)置完畢之后玷过，在
npm run serve
啟動(dòng)服務(wù)器之后袋马，保存代碼會(huì)自動(dòng)對(duì)代碼進(jìn)行l(wèi)int软啼，也可以通過(guò)
npm run lint
命令執(zhí)行ESLint的代碼校驗(yàn)和修復(fù)
自定義校驗(yàn)規(guī)則
- ESLint 官網(wǎng)>用戶(hù)指南>規(guī)則 中提供了每種規(guī)則的用法以及支持的選項(xiàng)
- ESLint 中文文檔：
如何查詢(xún)？
首先要得到規(guī)則名稱(chēng)（比如下面例子奠骄，添加分號(hào)使得風(fēng)格不允許）
semi就是規(guī)則名稱(chēng)
后面的三個(gè)錯(cuò)誤內(nèi)容規(guī)則都可以在文檔中查詢(xún)到相應(yīng)的用法
ESLint 配置文件自定義
比如我要關(guān)閉分號(hào)報(bào)錯(cuò)，就在ESLint配置文件下面的rules設(shè)置番刊，相關(guān)設(shè)置內(nèi)容應(yīng)當(dāng)查詢(xún)文檔自行了解
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'semi' : 'off', // 關(guān)閉加分號(hào)報(bào)錯(cuò)
'semi' : ['error','always'] // 開(kāi)啟不加分號(hào)報(bào)錯(cuò)
}
}
但是其實(shí)除非有特別的需求含鳞，一般不需要自己定義規(guī)則，如果真的有相應(yīng)的需求芹务，那就需要去eslint的官方文檔去進(jìn)行相關(guān)的配置項(xiàng)蝉绷，更改配置信息之后要重啟服務(wù)器才能查看到新配置的結(jié)果
注意
如果修改規(guī)則之后鸭廷，重啟不生效，可以將node_modules/.ache的規(guī)則緩存目錄刪除后重啟就行了
