前端项目开发代码格式规范

一、代码的规范、格式

代码规范可以多看看设计模式，开源项目中的一些设计理念

代码格式一般大都采用prettier或者是eslint来对代码进行统一格式化

1..prettierrc.js / .prettieringore

1. 打开项目1的根目录。
2. 确保您已经在项目1中创建了 .prettierrc.js 文件，并配置了 Prettier 格式化规则。
3. 在 VS Code 中，打开任意一个文件。
4. 使用快捷键 Ctrl + ,（Windows/Linux）或 Command + ,（Mac） 打开设置。
5. 搜索 "Format On Save"，并确保该设置被启用。
6. 在搜索框中输入 "Prettier"，找到 "Editor: Default Formatter" 设置项，并选择 "esbenp.prettier-vscode"。
7. 安装 "Prettier - Code Formatter" 扩展（如果尚未安装）。
8. 关闭设置窗口。 

//prettierr.js

//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
  tabWidth: 3, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  singleQuote: true, // 默认单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
  printWidth: 200, // 行宽
  semi: false, // 行尾加不加分号
  overrides: [
    {
      files: '.prettierrc',
      options: {
        parser: 'json',
      },
    },
  ],
}

 //此处配置是我项目中需要过滤掉的，可以根据实际需要自己去进行修改

// .prettierignore 
//文件是用来定义哪些文件应该被排除在 Prettier 格式化的范围之外，以便更灵活地控制格式化行为。

**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
.umi-test

 2..eslintrc.js / .eslintignore

1. 打开项目2的根目录。
2. 确保您已经在项目2中配置了 ESLint，并创建了 .eslintrc.js 配置文件。
3. 在 VS Code 中，打开任意一个文件。
4. 使用快捷键 Ctrl + ,（Windows/Linux）或 Command + ,（Mac） 打开设置。
5. 搜索 "Format On Save"，并确保该设置被启用。
6. 在搜索框中输入 "Eslint"，找到 "Eslint: Format Files On Save" 设置项，并确保它被启用。
7. 关闭设置窗口。

//eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: 'module',
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/strongly-recommended', // 如果使用 Vue
    'prettier', // 集成 Prettier 风格
  ],
  plugins: ['vue'], // 如果使用 Vue
  rules: {
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 3,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
    'vue/html-indent': ['error', 2], // HTML 缩进
    'indent': ['error', 2], // JavaScript 缩进
    'quotes': ['error', 'single'], // 使用单引号
    'semi': ['error', 'always'], // 要求使用分号
    'no-unused-vars': 'warn', // 警告未使用的变量
  },
  globals: {
    'Vue': 'readonly', // 如果使用 Vue
  },
  ignorePatterns: ['node_modules/', 'build/'],
};


//eslintignore
build/*.js
config/*.js

以上两者可以二选一对项目的代码进行格式化