Vue学习笔记4-项目开发规范及插件

Vue学习笔记4-项目开发规范及插件

一、安装插件

首先搜索安装 ESLint 和 Prettier 这两个插件。

这里对开发规范的配置仅配置ESLint，对代码格式的配置仅配置Prettier，用于代码格式化。

二、安装依赖

在项目中安装依赖：

npm i -D eslint eslint-plugin-vue eslint-define-config # eslink
npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier # prettire
npm i -D @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser # 对ts的支持

三、配置文件

然后我们依次编写一下对应的配置文件：
2.1. 在项目根目录新建 ESLint 风格检查配置文件：.eslintrc.js

import { defineConfig } from 'eslint-define-config'

export default defineConfig({
  root: true,
  /* 指定如何解析语法。*/
  parser: 'vue-eslint-parser',
  /* 优先级低于parse的语法解析配置 */
  parserOptions: {
    parser: '@typescript-eslint/parser',
    //模块化方案
    sourceType: 'module',
  },
  env: {
    browser: true,
    es6: true,
    node: true,
    // 解决 defineProps and defineEmits generate no-undef warnings
    'vue/setup-compiler-macros': true,
  },
  // https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals
  globals: {},
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // typescript-eslint推荐规则,
    'prettier',
    'plugin:prettier/recommended',
    './.eslintrc-auto-import.json',
  ],
  // https://cn.eslint.org/docs/rules/
  rules: {
    // 禁止使用 var
    'no-var': 'error',
    semi: 'off',
    // 优先使用 interface 而不是 type
    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
    '@typescript-eslint/no-explicit-any': 'off', // 可以使用 any 类型
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    // 解决使用 require() Require statement not part of import statement. 的问题
    '@typescript-eslint/no-var-requires': 0,
    // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-types.md
    '@typescript-eslint/ban-types': [
      'error',
      {
        types: {
          // add a custom message to help explain why not to use it
          Foo: "Don't use Foo because it is unsafe",

          // add a custom message, AND tell the plugin how to fix it
          String: {
            message: 'Use string instead',
            fixWith: 'string',
          },

          '{}': {
            message: 'Use object instead',
            fixWith: 'object',
          },
        },
      },
    ],
    // 禁止出现未使用的变量
    '@typescript-eslint/no-unused-vars': [
      'error',
      { vars: 'all', args: 'after-used', ignoreRestSiblings: false },
    ],
    'prettier/prettier': ['error', { singleQuote: true, parser: 'flow', semi: false }],
    'vue/html-indent': 'off',
    // 关闭此规则 使用 prettier 的格式化规则，
    'vue/max-attributes-per-line': ['off'],
    // 优先使用驼峰，element 组件除外
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
      {
        ignores: ['/^el-/', '/^router-/'],
        registeredComponentsOnly: false,
      },
    ],
    // 强制使用驼峰
    camelcase: ['error', { properties: 'always' }],
    // 优先使用 const
    'prefer-const': [
      'error',
      {
        destructuring: 'any',
        ignoreReadBeforeAssign: false,
      },
    ],
  },
})

2.2. 在项目根目录新建 ESLint 的代码检测忽略的文件的配置文件：.eslintignore

/node_modules/
/public/
.vscode
.idea

2.3. 在项目根目录新建 Prettier 的代码格式化配置文件：.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

2.4. 在项目中我们最好是使用统一行尾符（建议不管还是 mac 还是 windows 都使用 lf ），但是按上面的配置，我们发现保存的时候无法将 crlf 行尾符转换成 lf 行尾符，当然我们可以直接点击 vscode 的右下角切换行尾符，但终究是有点麻烦，这时使用 .editorconfig 就很有必要了。在项目根路径新建文件 .editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf

四、编辑器设置

4.1. 首先在项目根目录看有没有 .vscode 文件夹，若没有，就新建。

若想代码保存时自动格式化，新建 settings.json 文件：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

一键安装项目推荐的vscode插件，新建 extensions.json 文件：

{
  "recommendations": [
    "vue.volar",
    "ms-ceintl.vscode-language-pack-zh-hans",
    "mikestead.dotenv",
    "donjayamanne.githistory",
    "lokalise.i18n-ally",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "zhucy.project-tree",
    "eamodio.gitlens",
    "ms-vscode.powershell",
    "vscode-icons-team.vscode-icons"
  ]
}

4.2. 提交以上文件到 git 代码仓库，在 .gitignore 文件中配置：

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

4.3. 团队其他成员拉代码后, 打开 vscode, 依次点击1,2,3, 会自动输入@recommended, 工作区推荐的插件就是 .vscode/extensions.json 文件推荐的。