uniapp 配置eslint + prettier

背景：使用的是vue/cli建立的支付寶小程式專案
話不多說上菜

安裝eslint ，因為專案中使用的是cli搭建的，所以直接使用 vue add @vue/eslint
vue add @vue/eslint
然後根據自己喜好選擇風格，這裡我選擇的是prettier
配置.eslintrc.js
在專案根目錄新建檔案.eslintrc.js,根據自己需求配置規則

module.exports = {
    root: true,
    env: {
        node: true,
    },
    globals: {
        uni: "readonly",
        my:"readonly"
    },
    extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
    parserOptions: {
        parser: "babel-eslint",
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-sequences": 0,
        "import/named": 0,
        "no-useless-concat": 0,
        "no-unreachable": 0,
        "no-case-declarations": 0,
        "no-continue": 0,
        "no-redeclare": 0,
        "block-scoped-var": 0,
        "operator-assignment": 0,
        "no-multi-assign": 0,
        "comma-dangle": 0,
        "prefer-const": 0,
        "semi": 0,
        "eol-last": 0,
        "linebreak-style": 0,
        "no-unused-vars": 0,
        "no-useless-computed-key": 0,
        "default-case": 0,
        "prefer-destructuring": 0,
        "arrow-parens": 0,
        'no-var': 2, // 要求使用 let 或 const 而不是 var
        "comma-spacing": 0,
        "no-mixed-operators": 0,
        "radix": 0,
        "prefer-promise-reject-errors": 0,
        "arrow-body-style": 0,
        "prefer-rest-params": 0,
        "no-restricted-syntax": 0,
        "vars-on-top": 0,
        "import/no-named-as-default": 0,
        "import/extensions": 0,
        "import/no-named-as-default-member": 0,
        "guard-for-in": 0,
        "no-unused-expressions": 0,
        "import/prefer-default-export": 0,
        "no-shadow": 0,
        "no-nested-ternary": 0,
        "no-empty": 0,
        "eqeqeq": 0,
        "camelcase": 0,
        "prefer-template": 0,
        "dot-notation": 0,
        "prefer-arrow-callback": 0,
        "no-plusplus": 0,
        "no-else-return": 0,
        "one-var-declaration-per-line": 0,
        "consistent-return": 0,
        "no-param-reassign": 0,
        "max-len": 0,
        "no-lonely-if": 0,
        "array-callback-return": 0,
        "prefer-object-spread": 0,
        "import/order": 0,
        "import/newline-after-import": 0,
        "func-names": 0,
        "no-console": 0,
        "no-underscore-dangle": 0,
        "no-useless-escape": 0
    },
};

配置eslint不用檢查的檔案 .eslintignore
根目錄新建檔案.eslintignore ，根據實際需求配置

/utils
/subpackage/utils
/node_modules
/postcss.config.js
/babel.config.js

最後配置.prettierrc.js
根目錄新建.prettierrc.js檔案，根據實際需求配置

//配置 prettier  。prettierrc.js
module.exports = {
  // 單行最大長度
  printWidth: 100,
  // 設定編輯器每一個水平縮排的空格數
  tabWidth: 2,
  // 在句尾新增分號
  semi: true,
  // 使用單引號
  singleQuote: true,
  jsxSingleQuote: true,
  // 在任何可能的多行中輸入尾逗號。
  trailingComma: 'all',
  // 在物件字面量宣告所使用的的花括號後（{）和前（}）輸出空格
  bracketSpacing: true,
  // 在多行JSX元素最後一行的末尾新增 > 而使 > 單獨一行（不適用於自閉和元素）
  jsxBracketSameLinte: false,
  // 為單行箭頭函式的引數新增圓括號。
  alwaysParens: 'always',
  // 行結束
  endOfLine:"auto",
  vueIndentScriptAndStyle: true, //是否縮排Vue 檔案中的程式碼<script>和<style>標籤
  htmlWhitespaceSensitivity:'ignore',//HTML 空白敏感度
};

最後一步在package.json檔案中修改一下lint的命令，修改為
```
 "lint": "eslint --fix --ext .js,.vue src",
```
使用當有問題的時候就報錯啦

這些警告不用擔心，執行一下npm run lint 會自己修復的

修復後

uniapp 配置eslint + prettier

相關文章