一、代码的规范、格式
代码规范可以多看看设计模式，开源项目中的一些设计理念
代码格式一般大都采用prettier或者是eslint来对代码进行统一格式化
1..prettierrc.js / .prettieringore
-
打开项目1的根目录。
-
确保您已经在项目1中创建了
.prettierrc.js文件，并配置了 Prettier 格式化规则。 -
在 VS Code 中，打开任意一个文件。
-
使用快捷键
Ctrl + ,（Windows/Linux）或Command + ,（Mac） 打开设置。 -
搜索 "Format On Save"，并确保该设置被启用。
-
在搜索框中输入 "Prettier"，找到 "Editor: Default Formatter" 设置项，并选择 "esbenp.prettier-vscode"。
-
安装 "Prettier - Code Formatter" 扩展（如果尚未安装）。
-
关闭设置窗口。
//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
-
打开项目2的根目录。
-
确保您已经在项目2中配置了 ESLint，并创建了
.eslintrc.js配置文件。 -
在 VS Code 中，打开任意一个文件。
-
使用快捷键
Ctrl + ,（Windows/Linux）或Command + ,（Mac） 打开设置。 -
搜索 "Format On Save"，并确保该设置被启用。
-
在搜索框中输入 "Eslint"，找到 "Eslint: Format Files On Save" 设置项，并确保它被启用。
-
关闭设置窗口。
//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
以上两者可以二选一对项目的代码进行格式化
除了这些自动化代码规范，还有很多一些写法、参数等的规范可以参考这个gitHub大佬的文章，写的很详细、很不错：JavaScript风格指北
