vue項目Eslint和prettier結合使用

一、eslint介紹——程式碼語法檢查工具

Eslint是一個程式碼檢查工具，用來檢查你的程式碼語法是否符合指定的規範,ECMAScript標準

二、prettier插件——程式碼格式化工具

prettier是一款優秀的程式碼格式化工具，它並不關心你的語法是否正確，只關心你的程式碼格式，比如是否使用單引號，語句結尾是否使用分號等等，它可以把格式錯亂的程式碼轉化為符合標準的漂亮程式碼，prettier支援格式化的語言有：JavaScript，TypeScript，Flow，JSX，JSON，CSS，SCSS，Less，HTML，Vue，Angular，GraphQL，Markdown，YAML。
prettier也開發了一款vscode的插件，可以在vscode中搜索安裝
(更加建議在項目中安裝prettier,因為這樣可以在多人開發中保持程式碼風格一致)

三、Vetur 插件——Vue程式碼高亮顯示的一款插件

四、Eslint 依賴

4.1、babel-eslint——用於ESLint的Babel解析器的包裝器

babel-eslint現在是@babel/eslint-parser
babel是一個轉碼器，比如可以將ES6的程式碼轉換為ES5的程式碼，從而在適配環境下運行

我什麼時候應該使用babel-eslint？

ESLint的默認解析器和核心規則只支援最新的最終ECMAScript標準，不支援Babel提供的實驗性（如新特性）和non-standard（如流或TypeScript類型）語法。babel-eslint是一個解析器，它允許ESLint在Babel轉換的源程式碼上運行。
使用:要使用babel-eslint， 注意：官方文檔中描述的4.2、eslint-plugin-vue——Vue.js的官方ESLint插件
eslint-plugin-vue可以用來檢查<template>和.vue里的<script>錯誤並有效追蹤提示，非常方便定位
安裝: npm i eslint-plugin-vue -D

4.3、@vue/cli-plugin-eslint——eslint 與 vue 整合包

集體安裝:五、prettier依賴

5.1、 eslint-config-prettier ——解決Prettier和 ESLint的衝突

處理方式:禁用掉了一些不必要的以及和 Prettier 相衝突的 ESLint 規則
安裝:npm install --save-dev eslint-config-prettier
修改 eslintrc 文件,在 extends 部分加入 prettier 即可





5.2、eslint-plugin-prettier——解決Prettier和 ESLint的衝突(更完美版)
將prettier和eslint結合起來使用,這個插件的主要作用就是將 prettier 作為 ESLint 的規則來使用，相當於程式碼不符合 Prettier 的標準時，會報一個 ESLint 錯誤，同時也可以通過 eslint --fix 來進行格式化,這樣就相當於將 Prettier 整合進了 ESLint 中。
安裝依賴:
npm install --save-dev eslint-plugin-prettier
npm install --save-dev prettier
修改 eslintrc 文件
{


5.3、prettier-eslint-cli
這是一個CLI，允許您在一個或多個文件上使用安裝: yarn add --dev prettier-eslint-cli

prettier-eslint 與 prettier-eslint-cli 區別?

  • prettier-eslint 只能處理字元串
  • prettier-eslint-cli 能處理一個或多個文件
  • 默認情況下，prettier-eslint-cli 先運行 prettier，再運行eslint --fix
集體安裝:

六、配置Eslint

在項目的根目錄下，新建.eslintrc.js 文件,例如:
// .eslintrc
module.exports = {
  plugins: ['prettier'],
  parser: "vue-eslint-parser",
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    parser: 'babel-eslint',
  },
  rules: {
    'prettier/prettier': 'error',
    "parser": 0
  },
  extends: ['plugin:prettier/recommended'],
};

七、Prettier 配置,

根目錄新建.prettierrc.js,例如:
module.exports = {
  // 行末分號
  semi: false,
  // 單引號
  singleQuote: true,
}
Tags:

VirMach 便宜 VPS