# Frontend Coding Style
## event function 命名規則
* on前綴
## 排版規則
1. 符號使用
* 單引號
* 結尾分號
3. 空行、縮排、斷行
* 兩個空白縮排
* 關鍵字空白
* 分號後無多餘空白
* array裡面存在一個以上的物件時換行
* 物件一律換行
4. 函式
* 箭頭函式
* 函式註解
* 箭頭函式參數固定用括號包起來

* eslint 設定檔內容

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    // 為了format pug格式
    'prettier/prettier': [
      'warn',
      {
        pugSingleQuote: false,
        pugAttributeSeparator: 'none',
        pugWrapAttributesThreshold: 2,
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      // we are only using this rule to check for unused arguments since TS
      // catches unused variables but not args.
      { varsIgnorePattern: '.*', args: 'none' },
    ],
    // base formatting
    indent: ['warn', 2, { SwitchCase: 1 }],
    quotes: ['warn', 'single'],
    semi: ['warn'],
    'max-len': [
      'warn',
      {
        code: 120,
        ignoreComments: true,
        ignoreTrailingComments: true,
        ignoreUrls: true,
        ignoreStrings: true,
        ignoreTemplateLiterals: true,
        ignoreRegExpLiterals: true,
      },
    ],
    'spaced-comment': ['warn', 'always'],
    // array
    'array-bracket-newline': ['warn', { minItems: 2 }],
    'array-element-newline': ['warn', 'always'],
    // object
    'object-property-newline': 'warn',
    'object-curly-newline': ['error'],
    'no-trailing-spaces': 'warn',
    // function style
    'func-style': ['warn', 'expression'],
    'space-before-function-paren': [
      'warn',
      {
        anonymous: 'always',
        named: 'never',
        asyncArrow: 'always',
      },
    ],
    'function-paren-newline': ['warn', { minItems: 4 }],
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ],
};

* 預計日後規劃成內部共用的eslint-config-package
* VSCode需安裝Prettier ESLint
~~* pug 需安裝 yarn add --dev prettier @prettier/plugin-pug 並另外設定~~

待確認
template裡面的prop太多時自動斷行