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

摘繁华
253 阅读4分钟

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

一、安装插件

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

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

二、安装依赖

在项目中安装依赖：

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

三、配置文件

然后我们依次编写一下对应的配置文件：

ESLint

3.1. 在项目根目录新建 ESLint 风格检查配置文件：.eslintrc.cjs

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,
      },
    ],
  },
})

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

/node_modules/
/public/
.vscode
.idea

Prettier

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

module.exports = {
  // 超过最大值换行
  printWidth: 100,
  // 缩进字节数
  tabWidth: 2,
  // 缩进不使用tab，使用空格
  useTabs: false,
  // 句尾添加分号
  semi: true,
  vueIndentScriptAndStyle: true,
  // 使用单引号代替双引号
  singleQuote: true,
  quoteProps: 'as-needed',
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  bracketSpacing: true,
  // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
  trailingComma: 'es5',
  jsxSingleQuote: false,
  //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  arrowParens: 'avoid',
  insertPragma: false,
  requirePragma: false,
  // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
  proseWrap: 'preserve',
  htmlWhitespaceSensitivity: 'strict',
  // 结尾
  endOfLine: 'lf',
  rangeStart: 0,
};

四、编辑器设置

Editor

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

# 告诉EditorConfig插件，这是根文件，不用继续往上查找。
root = true

# 匹配全部文件。
[*]
# 使用`utf-8`字符集。
charset=utf-8
# 结尾换行符，可选`lf`、`cr`、`crlf`。
end_of_line=lf
# 在文件结尾插入新行
insert_final_newline=true
# 缩进的样式为空格。
indent_style=space
# 缩进为2
indent_size=2
# 行最大长度为100
max_line_length = 100

# 匹配以`.yml`、`.yaml`、`.json`结尾的文件
[*.{yml,yaml,json}]
indent_style = space
indent_size = 2

# 匹配以`.md`结尾的文件
[*.md]
# 修剪尾随空格
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

4.2. 首先在项目根目录看有没有 .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"
  ]
}

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

image-20220818103040910.png

五、代码上传

Git

5.1. 提交以上文件到 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?
avatar
文章
阅读
粉丝