项目搭建规范

popop
237 阅读4分钟

代码规范

  • 因为在开发过程中每个人自己的编译器配置的代码规范格式不同 所以要在此项目中配置代码规范
  • 在一个团队中 老大把整个项目使用的格式规范配置好 直接使用就行了
  • 自己写的代码最终也会以这个格式提交上去

.editorconfig

  • ​
[*]  # 表示所有文件适用
indent_style = space # 缩进风格(tab | space)
indent_size = 2 # 缩进大小
end_of_line = if # 控制换行类型(if | cr | crif)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
​
[*.md] # 表示仅 md 文件使用一下规则
max_line_length = off
trim_trailing_whitespace = false
  • VSCode 需要安装一个插件： EditorConfig for VSCode

安裝 eslint + prettierrc

  • 上一篇文章 我使用 vue3 + ts
    • 所以默认是有 ts 依赖的 没有的话自己安装、
    "devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.29.0",
  "@typescript-eslint/parser": "^5.29.0",
  "@vitejs/plugin-vue": "^2.3.3",
  "eslint": "^8.18.0",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-prettier": "^4.0.0",
  "eslint-plugin-vue": "^9.1.1",
  "prettier": "^2.7.1",
  "typescript": "^4.6.0-dev.20220122",
  "vite": "^2.9.9",
  "vue-eslint-parser": "^9.0.3",
  "vue-tsc": "^0.34.7"
 }

    • 这里给出下面要下面配置代码规范的依赖 具体配置下面说

    • image.png

  • yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier vue-eslint-parser -D

这三个依赖分别是：

  • eslint: ESLint的核心代码
  • @typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
  • @typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
  • 安装好这3个依赖包之后，在根目录下新建.eslintrc.js文件，该文件中定义了ESLint的基础配置，一个最为简单的配置如下所示：

.prettierrc

  • npm i -D prettier 可以用编译器格式化 要是不能用编译器的话 就安装这个包 并配置文件

  • {
  "useTabs": false, // 使用 tab 缩进还是空格缩进 选择 false 空格缩进
  "tabWidth": 2, // tab 是空格的情况下 几个空格 2 个
  "printWidth": 80,// 当行字符的长度 推荐 80
  "singleQuote": true, // 单引号还是双引号 true 单引号
  "trailingComma": "none", // 多行输入的尾逗号是否添加 设置未 none
  "semi": false, // 语句末尾是否要加分号 末尾值 true 选择 false 表示不加
}
  • 这里可以使用 .prettierrc.js 文件
  • module.export = {
    "useTabs": false, // 使用 tab 缩进还是空格缩进 选择 false 空格缩进
    "tabWidth": 2, // tab 是空格的情况下 几个空格 2 个
    "printWidth": 80,// 当行字符的长度 推荐 80
    "singleQuote": true, // 单引号还是双引号 true 单引号
    "trailingComma": "none", // 多行输入的尾逗号是否添加 设置未 none
    "semi": false, // 语句末尾是否要加分号 末尾值 true 选择 false 表示不加
  }
  • 在package.json中配置一个scripts： 
    • "script": {
  "prettier": "prettier --write ."
}
  • 可以写一个脚本 来进行所有代码格式话 直接运行这个脚本 对所有代码进行 格式化规范
    • 但是这样并不方便 下面会配置 vscode 直接保存代码就会格式化代码了

  • 编辑器 安装了 ESlint 插件 但是代码格式是按照 pretter 规范的 也就是两者的规范会冲突 所以要合并

    • 1.默认安装的时候 选择 eslint+pretter 就会安装相应的包 或者自己手动安装
    • eslint-plugin-prettier 翻译成中文自己跟着配置就行了
    • .eslintrc.js 
      • module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2020,
    sourceType: "module",
    jsxPragma: "React",
    ecmaFeatures: {
      jsx: true,
      tsx: true,
    },
  },
  plugins: ["@typescript-eslint", "prettier"], // 注册插件
  extends: [
    // 打开这个插件提供的规则
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
    "prettier",
  ],
  overrides: [
    {
      files: ["*.ts", "*.tsx", "*.vue"],
    },
  ],
  rules: {
    // js/ts
    // 'no-console': ['warn', { allow: ['error'] }],
    "prettier/prettier": "error", // 打开这个插件提供的规则，它在 ESLint 中运行 Prettier
    "arrow-body-style": "off", // 关闭两个不幸与这个插件有问题的 ESLint 核心规则
    "prefer-arrow-callback": "off",
  },
};
  • 注意 设置完配置文件如果飘红 记得重启 vscode 这很重要!!!!
  • .prettierignore 创建.prettierignore忽略文件 
    • /dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*
  • VSCode 需要安装的插件

    • image-20210722214543454

    • image-20210722215933360

    • setting 文件中 配置 ctrl + , 或者 ctrl + shift + P 搜索 setting.json 这里留下我的 自动保存在最后几行 然后项目配置要和 vscode 配置一样才能 ctrl + s 保存时自动格式化

      •   // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  //黄色波浪线
  "eslint.enable": true,
  // 重新设定tabsize
  "editor.tabSize": 2,
  "window.zoomLevel": 1,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript"
  ],
  "eslint.format.enable": true,
  // 是否一直启用
  "eslint.alwaysShowStatus": true,
  // 保存时自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    // "eslint.autoFixOnSave" : true,  // 每次保存的时候将代码按eslint格式进行修复
  },
  "editor.renderWhitespace": "all",
  "editor.defaultFormatter": "esbenp.prettier-vscode",  
  // "window.zoomLevel": 0, // 原始缩放比例
  "eslint.options": {    //指定vscode的eslint所处理的文件的后缀
    "extensions": [
        ".js",
        ".vue",
        ".ts",
        ".tsx"
    ]
  }
  ...

代码提交规范这里就没有配置了

  • 有机会之后出文章
avatar
文章
阅读
粉丝