Vue3專案配置 eslint + prettier

songxianling1992發表於2022-12-28
VueEsLint
初衷: 在沒有固定的專案模版之前；每次新建專案之後配置程式碼風格都需要來回貼上；並且有時候貼上了也不生效；故總結成文件；方便之後直接使用

介紹

  • ESLint 是JavaScript和JSX檢查工具
  • prettier 程式碼格式化工具

安裝依賴

#安裝 eslint
npm install --save-dev eslint eslint-plugin-vue

#安裝 prettier
npm install --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier

#安裝 typescript 支援
npm install --save-dev @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

配置檔案

  1. 根目錄新建 .eslintrc.js 檔案
module.exports = {
  root: true,
  env: {
    browser: true,
    // 必填
    node: true,
    es2021: true
  },
  parser: 'vue-eslint-parser',
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    // eslint-config-prettier 的縮寫
    'prettier'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  // eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的縮寫
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false,
        trailingComma: 'none',
        arrowParens: 'avoid',
        printWidth: 160
      }
    ],
    'no-undef': 'off',
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: []
      }
    ],
    'vue/v-on-event-hyphenation': 0 // html上的事件允許駝峰格式phoneCallback
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
}
  1. 根目錄新建 .eslintignore 配置忽略檔案
.vscode
.idea
.local
index.html
!.env-config.ts
components.d.ts
/node_modules/
/public/
  1. 根目錄新建 .prettierrc.js
module.exports = {
  printWidth: 160, // 單行輸出（不折行）的（最大）長度  
  tabWidth: 2, // 每個縮排級別的空格數  
  tabs: false, // 使用製表符 (tab) 縮排行而不是空格 (space)  
  semi: false, // 是否在語句末尾列印分號  
  singleQuote: true, // 是否使用單引號
  quoteProps: 'as-needed', // 僅在需要時在物件屬性周圍新增引號  
  bracketSpacing: true, // 是否在物件屬性新增空格  
  htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 檔案的全域性空白區域敏感度, "ignore" - 空格被認為是不敏感的  
  trailingComma: 'none', // 去除物件最末尾元素跟隨的逗號  
  useTabs: false, // 不使用縮排符，而使用空格  
  jsxSingleQuote: false, // jsx 不使用單引號，而使用雙引號  
  // arrowParens: 'always', // 箭頭函式，只有一個引數的時候，也需要括號  
  rangeStart: 0, // 每個檔案格式化的範圍是檔案的全部內容  
  proseWrap: 'always', // 當超出print width（上面有這個引數）時就折行  
  endOfLine: 'lf', // 換行符使用 lf
  "max-lines-per-function": [ 2, { max: 320, skipComments: true, skipBlankLines: true }, ] // 每個函式最大行數
}

vscode儲存並自動格式化

  • 安裝編譯器 ESLint 外掛
  • 修改vscode配置
{
    "editor.formatOnSave": true, // 1
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": true
}

完結

儲存即可自動格式；如不生效；重啟編譯器～

相關文章