山西太原网站建设公司,做货运代理网站,深圳网站关键词优化排名,wordpress静态路由一、开发工具
开发工具统一使用 VSCode代码格式化插件使用 Prettier代码格式校验使用 ESLintVSCode 需安装的插件有#xff1a;ESLint、Prettier、Vetur
二、命名规范 项目命名使用小写字母#xff0c;以连字符分隔 正确#xff1a;fe-project 错误#xff1a;FE PROJECT…一、开发工具
开发工具统一使用 VSCode代码格式化插件使用 Prettier代码格式校验使用 ESLintVSCode 需安装的插件有ESLint、Prettier、Vetur
二、命名规范 项目命名使用小写字母以连字符分隔 正确fe-project 错误FE PROJECT、fePROJECT 目录命名使用小写字母以连字符分隔定义组件时除外采用复数命名法缩写除外 正确scripts、styles、images 错误script、style、image 文件命名使用小写字符以连字符分隔定义组件时除外 正确index.html、element-custom.scss 错误Index.html、ElementCustom.scss 组件名使用大驼峰命名 正确MenuItem、Upload 错误menu-item、upload 命名禁止使用拼音与英文混合的方式不允许使用中文命名
三、项目结构 目录结构以 Vue 项目为例 project-name |–node_modules 依赖 |–public 公共文件一般包含index.html、favicon.ico等 |–src 源码文件目录 |–api 接口定义目录 |–assets 静态资源目录 |–components 全局组件目录 |–plugins 插件目录 |–fonts 字体文件目录 |–directive 自定义指令目录 |–layout 布局文件目录 |–icons 图标文件目录 |–router 路由文件目录 |–store 全局状态管理文件目录 |–styles 样式文件目录 |–utils 公共函数目录 |–views|pages 页面目录 |–SystemManage 页面组件目录示例 |–components 页面内组件目录 |–index.vue 页面文件 图片、字体等静态资源不应放在局部组件中应放在全局目录下组件中使用 或 引用。
四、HTML规范适用于Vue Template
使用 2 个空格缩进嵌套的节点必须有缩进不同的模块之间以空行间隔标签必须闭合
五、CSS及其他预处理语言规范 使用2个空格缩进 不同的模块之间以空行间隔 类名使用小写字母以连字符分隔遵循 BEM 命名规范使用【块__元素–修饰符】的形式命名 css 中禁止使用 符号拼接类名 正确 .form {.form-item {}
}
/* 或 */
.form {}
.form-item {}
/* 仅禁止使用拼接类名以下使用方式不禁止 */
.form-item {.active {}::before {}:nth-child(1) {}
}错误 .form {-item {}
}scss 或 less 中的变量、函数等使用小驼峰形式命名 颜色使用 16 进制小写的形式尽量使用简写 正确 color: #abcdef;
background-color: #012;错误 color: #ABCDEF;
background-color: #001122;css 中定义样式注意需按以下顺序 表示元素位置的如 position 表示元素如何显示的如 display 表示元素尺寸的如 width、height、padding 表示元素内容样式的如 color、font-size 表示元素对外的状态的如 border、box-shadow、margin 示例 .box {position: relative;flex-grow: 1;display: flex;align-items: center;justify-content: center;flex-direction: column;width: 350px;height: 350px;padding: 50px;color: #666;font-size: 12px;text-align: center;background: #fff;border-radius: 8px;border: 1px solid #fff;box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.06);margin-bottom: 20px;
}六、JavaScript规范 使用 2 个空格缩进 单行长度不能超过 120 个字符 句尾是否添加分号不强制但是单个项目中需统一 定义变量使用 let、const 代替 var 统一使用单引号 正确 let name zhangsan;错误 let name zhangsan;下列关键字后必须有大括号即使代码块的内容只有一行 If、else、for、while、do、switch、try、catch、finally、with 正确 if (condition) {doSomething();
}错误 if (condition) doSomething();箭头函数的参数必须添加括号 正确 (res) { };错误 res { };对象括号与文字之间需加空格 正确 { name: zhangsan }错误 {name: zhangsan}对象的最后一个属性值后加逗号单行除外 正确 const obj {name: zhangsan,age: 20,
};错误 const obj {name: zhangsan,age: 20
};变量命名使用小驼峰的形式不能以下划线和美元符号作为开头或结尾特殊情况除外 常量命名使用全大写字母的形式单词与单词之间使用下划线分隔 构造函数名首字母大写 增删改查统一使用 add、delete、update、get 四个单词 注释符号与注释内容使用一个空格隔开 正确 // 这是一段注释
/* 这是一段注释 */错误 //这是一段注释
/*这是一段注释*/使用 、! 代替 、! 禁止使用 undefined 进行变量判断应使用 Object.prototype.toString.call( ) 或 typeof 判断 判断变量是否为空时优先使用 ! 或 !! 强制转为布尔类型后进行判断 创建对象时优先使用字面量创建而不使用对象构造器 正确 const user {age: 18,name: zhangsan,
};错误 const user new Object();
user.age 18;
user.name zhangsan;对象合并时优先使用扩展运算符而不是 Object.assign( ) 正确 const obj { ...obj1, ...obj2 };错误 const obj Object.assign({}, obj1, obj2);接口文件统一放在 src/api 目录中接口文件应根据模块来定义接口函数必须添加注释 新项目应统一使用 dayjs 作为日期处理插件
七、Vue规范
组件名应该始终是多个单词组成且使用大驼峰的格式props 中属性必须使用小驼峰的方式命名必须指定类型必须加上 required 或者 default 二选一使用 scoped 限制组件样式作用域需要频繁切换显示隐藏状态时使用 v-show而不使用 v-ifmethods 中定义方法应以模块划分相同模块的放在一起。初始化及公用的方法应放在最上方组件标签中属性的命名使用小写字符加连字符的形式 正确CustomComponent :custom-idid /错误CustomComponent :customIdid /八、项目配置 项目根目录需创建以下文件 .editorconfig、jsconfig.json、.prettierrc.js、.eslintrc.js、.prettierignore、.eslintignore VSCode 中用户的 settings.json 配置内容如下 {files.exclude: {**/.git: true,**/.svn: true,**/.hg: true,**/CVS: true,**/.DS_Store: true,**/.vscode: true},files.associations: {*.wxss: css,*.wxml: html,*.wxs: javascript},explorer.compactFolders: false,javascript.format.enable: false,javascript.updateImportsOnFileMove.enabled: prompt,emmet.triggerExpansionOnTab: true,emmet.includeLanguages: {vue-html: html,javascript: javascriptreact},emmet.syntaxProfiles: {javascript: jsx},editor.tabSize: 2,editor.fontSize: 16,editor.wordWrap: off,editor.formatOnSave: true,editor.formatOnType: true,editor.detectIndentation: false,editor.defaultFormatter: esbenp.prettier-vscode,editor.codeActionsOnSave: {source.fixAll: false},vetur.format.options.tabSize: 2,vetur.format.defaultFormatter.js: prettier,vetur.format.defaultFormatter.html: prettier,vetur.format.defaultFormatter.scss: prettier,vetur.format.defaultFormatter.css: prettier,eslint.validate: [javascript, javascriptreact, jsx, vue, html],prettier.semi: true,prettier.tabWidth: 2,prettier.printWidth: 120,prettier.singleQuote: true,prettier.trailingComma: es5,prettier.endOfLine: lf,prettier.bracketSpacing: true,prettier.arrowParens: always,prettier.bracketSameLine: false,prettier.singleAttributePerLine: false,prettier.htmlWhitespaceSensitivity: ignore,[javascript]: {editor.defaultFormatter: esbenp.prettier-vscode},[jsonc]: {editor.defaultFormatter: esbenp.prettier-vscode},[html]: {editor.defaultFormatter: esbenp.prettier-vscode},[json]: {editor.defaultFormatter: esbenp.prettier-vscode},[scss]: {editor.defaultFormatter: esbenp.prettier-vscode},git.enableSmartCommit: true,workbench.tree.indent: 16,workbench.colorTheme: Monokai,workbench.startupEditor: newUntitledFile,breadcrumbs.enabled: false
}用户的 settings.json 仅作为通用配置对于有特殊需求的项目需配置工作区中的 settings.json。工作区的 settings.json 路径为项目根目录下的 .vscode/settings.json。注意此文件不应该被 git 忽略 editorconfig 文件配置如下 # 告诉 EditorConfig 插件这是根文件不用继续往上查找
root true# 匹配全部文件
[*]
# 设置字符集
charset utf-8
# 缩进风格可选 space、tab
indent_style space
# 缩进的空格数
indent_size 2
# 结尾换行符可选 lf、cr、crlf
end_of_line lf
# 在文件结尾插入新行
insert_final_newline true
# 删除一行中的前后空格
trim_trailing_whitespace true# 匹配 md 结尾的文件
[*.md]
insert_final_newline false
trim_trailing_whitespace falsejsconfig.json 文件配置如下 {compilerOptions: {baseUrl: ./,target: ES6,paths: {// 解决项目中使用作为路径别名导致vscode无法跳转文件的问题/*: [src/*]},// 解决prettier对于装饰器语法的警告experimentalDecorators: true,// 解决.jsx文件无法快速跳转的问题jsx: preserve,allowSyntheticDefaultImports: true},// 提高 IDE 性能include: [src/**/*],exclude: [node_modules, dist, build]
}prettierrc.js文件配置如下 module.exports {printWidth: 120, // 限制每行字符个数semi: false, // 句尾是否添加分号singleQuote: true, // 是否使用单引号tabWidth: 2, // 指定每个缩进级别的空格数useTabs: false, // 是否使用制表符缩进arrowParens: always, // 始终给箭头函数的参数加括号, // (x) {} 箭头函数参数只有一个时是否要有小括号。avoid省略括号trailingComma: es5,endOfLine: lf, // 结尾是 \n \n\r lf , autobracketSpacing: true, // 在对象括号与文字之间加空格 { foo: bar }htmlWhitespaceSensitivity: ignore, // css ignorebracketSameLine: false, // 将单独一行还是在最末尾 为 true 时放在末尾singleAttributePerLine: false, // 标签中是否单个属性占一行有多个属性时进行换行 为 true 时换行
}eslintrc.js文件配置如下 module.exports {root: true,parserOptions: {parser: babel-eslint,sourceType: module,},env: {browser: true,node: true,es6: true,},extends: [plugin:vue/recommended,eslint:recommended,// plugin:prettier/recommended 需要添加到数组的最后一个元素// 需要安装 prettier、eslint-plugin-prettier、eslint-config-prettierplugin:prettier/recommended,],// 填加自定义规则// 基于 (https://github.com/vuejs/eslint-config-vue)rules: {},
};手动格式化代码需要在 package.json 中做如下配置注意配置 .prettierignore 将不需要格式化的文件忽略 {scripts: {prettier: prettier --write ./src},...
}九、
