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-parserbabel是一個轉碼器，比如可以將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 -D4.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-prettiernpm install --save-dev prettier修改 eslintrc 文件{5.3、prettier-eslint-cli這是一個CLI，允許您在一個或多個文件上使用安裝: yarn add --dev prettier-eslint-cliprettier-eslint 與 prettier-eslint-cli 區別?

prettier-eslint 只能處理字符串

prettier-eslint-cli 能處理一個或多個文件

默認情況下，prettier-eslint-cli 先運行 prettier ，再運行eslint --fix

集體安裝:六、配置Eslint在項目的根目錄下，新建.eslintrc.js 文件,例如:

// .eslintrcmodule.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,}
【vue項目Eslint和prettier結合使用】