第一步：

外掛安裝：

npm i -D eslint-plugin-prettier

　eslint-plugin-prettier外掛會呼叫prettier對你的程式碼風格進行檢查，其原理是先使用prettier對你的程式碼進行格式化，然後與格式化之前的程式碼進行對比，如果過出現了不一致，這個地方就會被prettier進行標記。

npm i -D eslint-config-prettier

　通過使用eslint-config-prettier配置，能夠關閉一些不必要的或者是與prettier衝突的lint選項。這樣我們就不會看到一些error同時出現兩次。使用的時候需要確保，這個配置在extends的最後一項。

第二步：

配置 .eslintrc.js （cli時選擇了eslint）：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'plugin:prettier/recommended',
    'prettier',
    'prettier/vue',
  ],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {
    'nuxt/no-cjs-in-config': 'off',
    indent: ['error', 4], // 4個空格縮排
    /* 更多配置請戳 http://eslint.cn/docs/rules/ */
  },
}
 

第三步：

配置.prettierrc（在根目錄下新建.prettierrc檔案，在使用eslint規則時，本地編輯器的格式化程式碼會與eslint的規則衝突，這裡自己配置一個.prettierrc格式化程式碼的檔案，約束您的程式碼風格）：

{
    "tabWidth": 4,
    // 使用tab縮排，預設false
    "useTabs": false,
    // 使用分號, 預設true
    "semi": false,
    // 使用單引號, 預設false(在jsx中配置無效, 預設都是雙引號)
    "singleQuote": false,
    // 行尾逗號,預設none,可選 none|es5|all
    // es5 包括es5中的陣列、物件
    // all 包括函式物件等所有可選
    "TrailingCooma": "all",
    // 物件中的空格 預設true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true,
    // JSX標籤閉合位置 預設false
    // false: <div
    //          className=""
    //          style={{}}
    //       >
    // true: <div
    //          className=""
    //          style={{}} >
    "jsxBracketSameLine": false,
    // 箭頭函式引數括號 預設avoid 可選 avoid| always
    // avoid 能省略括號的時候就省略 例如x => x
    // always 總是有括號
    "arrowParens": "avoid"
}
 

第四步：

配置webpack: (在nuxt.config.js中的build裡對webpack進行擴充套件配置)：

build: {
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true,
          },
        })
      }
    },
  },

我們專案是在webpack中引入eslint-loader來啟動eslint的，所以我們只要稍微修改webpack的配置，就能在啟動webpack-dev-server的時候，每次儲存程式碼同時自動對程式碼進行格式化。

eslint-plugin-prettier外掛會呼叫prettier對你的程式碼風格進行檢查，其原理是先使用prettier對你的程式碼進行格式化，然後與格式化之前的程式碼進行對比，如果過出現了不一致，這個地方就會被prettier進行標記,最後eslint自動fix按照prettier的規範修復error程式碼。