vue中的eslint可以幫我們檢測(cè)代碼,還可以幫我們格式化代碼,下來我們對(duì)他進(jìn)行一些簡單的配置,用到的編輯器是vscode.

首先我們?cè)趘scode的商店里下載3個(gè)插件, ESlint , Prettier - Code formatter , Vetur.
下載完成后打開vscode的首選項(xiàng)中的設(shè)置(我這里用到的是mac版本)

1.png

然后在左側(cè)找到擴(kuò)展下面的Eslint選項(xiàng),點(diǎn)擊右邊的在settings.json中編輯

2.png

打開之后添加下面的這段代碼然后保存

//每次保存的時(shí)候按照eslint格式進(jìn)行修復(fù)
    "eslint.autoFixOnSave": true,
    //添加vue語言的支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
           "autoFix": true 
        }
    ],

回到我們的項(xiàng)目中,找到.eslintrc.js配置文件,在rules中我們可以覆蓋他的一些默認(rèn)配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],

rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 添加?自定義規(guī)則
    "prettier/prettier": [
      // eslint校驗(yàn)不不成功后配置提示等級(jí)，配置error或2則報(bào)錯(cuò)，warn或1則警告，off或0則?無提示
      "error",//2,
      //然后我們加兩個(gè)配置singleQuote表示使用單引號(hào),semi設(shè)為false表示代碼尾部不加  ";"
      {
        singleQuote: true,
        semi: false
      }
    ]
  },

parserOptions: {
    parser: 'babel-eslint'
  }
}

配置之前的代碼,可以看到代碼后邊有;結(jié)尾的已經(jīng)開始報(bào)錯(cuò)了

5.png

6.png

配置完成后保存,然后執(zhí)行package.json中的lint命令: npm run lint

7.png

8.png

可以看到他已經(jīng)自動(dòng)幫我們格式化了.我們并不需要每次都執(zhí)行npm run lint;
執(zhí)行一次之后只要檢測(cè)我們的代碼不符合規(guī)范,我們保存代碼他會(huì)自動(dòng)幫我們格式化.如下:

1.gif