前端一些小技巧
VSCode安装插件Auto Close Tag: 自动关闭标签Auto Rename Tag: 自动配对改名Chinese (Simplified)(简体中文) Language: 开发工具汉化ESLint: 约束代码格式规范Path Autocomplete: 路径自动提示Prettier - Code formatter: 代码格式化Vetur: 应用 .vue 文件Vue 3 Snippe
·
VSCode安装插件
Auto Close Tag: 自动关闭标签
Auto Rename Tag: 自动配对改名
Chinese (Simplified)(简体中文) Language: 开发工具汉化
ESLint: 约束代码格式规范
Path Autocomplete: 路径自动提示
Prettier - Code formatter: 代码格式化
Vetur: 应用 .vue 文件
Vue 3 Snippets: vue 代码片段
Vue VSCode Snippets: vue 代码提示
Meng Dark Pro: 猛哥护眼系列主题
Material Theme: 主体颜色
vscode-icons: 文件夹及文件图标主体
open in browser: 本地浏览器预览VSCode中函数小括号后面不带空格配置
,'space-before-function-paren': ['error', 'never']VSCode配置文件json
函数名与小括号之间带空格
{
// eslint start 保存时自动格式化代码
"editor.formatOnSave": true,
// eslint配置项，保存时自动修复错误
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// "vetur.format.defaultFormatter.html": "js-beautify-html",
// 饿了吗admin 开启
// "vetur.format.defaultFormatterOptions": {
// "js-beautify-html": {
// "wrap_line_length": 100, //换行长度
// "wrap_attributes": "auto", //属性换行
// "end_with_newline": true
// }
// },
"vetur.ignoreProjectWarning": true,
// 让vetur使用vs自带的js格式化工具，以便在函数前面加个空格
// uni-app和vue 项目使用
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.semicolons": "remove",
// // 指定 *.vue 文件的格式化工具为vetur
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
// // 指定 *.js 文件的格式化工具为vscode自带
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
// // 默认使用prettier格式化支持的文件
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.jsxBracketSameLine": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"prettier.singleQuote": true,
"prettier.semi": false,
// prettier 的配置文件存放路径
"prettier.configPath": "C:\\Users\\BinBin-ROOT\\.prettierrc",
// 编辑器中文字的大小
"editor.fontSize": 16,
// 代码缩进使用2个空格，不要使用4个空格
"editor.tabSize": 2,
// 代码字体加粗
"editor.fontWeight": 700,
// 字母间距
"editor.letterSpacing": 2,
// 终端字母间距
"terminal.integrated.letterSpacing": 2,
// 行间距
"editor.lineHeight": 30,
// 不展示编辑器上方的面包屑
"breadcrumbs.enabled": false,
// 导入模块时包含模块的后缀名
"path-autocomplete.extensionOnImport": true,
// 路径提示
"path-autocomplete.pathMappings": {
"@": "${folder}/src"
},
// 开发工具图标主体
"workbench.iconTheme": "vscode-icons",
// 在没有从上一会话中恢复出信息的情况下, 控制启动时显示的编辑器, none: 在启动时不打开编辑器
"workbench.startupEditor": "none",
// 终端字号大小
"terminal.integrated.fontSize": 16,
// 终端字体加粗
"terminal.integrated.fontWeight": 700,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Meng Dark Pro",
// 编辑器用户指定设置
"editor.tokenColorCustomizations": {
"comments": {
// 设置字体样式 加粗 下划线 斜体等
"fontStyle": "bold", // bold underline italic
// 设置字体颜色
"foreground": "#00A23C"
},
// 关键字
"keywords": {
// 设置字体样式 加粗 下划线 斜体等
"fontStyle": "bold" // bold italic underline
}
// "variables": "#f00", // 变量名
// "strings": "#e2d75dbd", // 字符串
// "functions": "#5b99fcc9", // 函数名
// "numbers": "#AE81FF" // 数字
},
"explorer.confirmDragAndDrop": false
}函数名与小括号之间不带空格
{
// prettier 的配置文件存放路径
"prettier.configPath": "C:\\Users\\BinBin-ROOT\\.prettierrc",
// 编辑器中文字的大小
"editor.fontSize": 16,
// 代码缩进使用2个空格，不要使用4个空格
"editor.tabSize": 2,
// 代码字体加粗
"editor.fontWeight": 700,
// 开启编辑器的保存自动格式化功能
"editor.formatOnSave": true,
// 字母间距
"editor.letterSpacing": 2,
// 终端字母间距
"terminal.integrated.letterSpacing": 2,
// 行间距
"editor.lineHeight": 30,
// 不展示编辑器上方的面包屑
"breadcrumbs.enabled": false,
// 导入模块时包含模块的后缀名
"path-autocomplete.extensionOnImport": true,
// 路径提示
"path-autocomplete.pathMappings": {
"@": "${folder}/src"
},
// ESLint 插件的配置
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.alwaysShowStatus": true,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
"prettier.trailingComma": "none",
"prettier.semi": false,
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 300,
// 忽略警告信息
"vetur.ignoreProjectWarning": true,
// 防止自动导入
"vetur.completion.autoImport": false,
// 不验证 .vue 组件的模板结构
"vetur.validation.template": false,
// vetur 默认的格式化配置项
"vetur.format.defaultFormatterOptions": {
"prettier": {
// tab缩进大小,默认为2
"tabWidth": 2,
// 行尾逗号,默认none,可选 none|es5|all
// none 没有逗号
// es5 包括es5中的数组、对象
// all 包括函数对象等所有可选
"trailingComma": "none",
// 使用分号, 默认true
"semi": false,
// 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
"singleQuote": true,
// 箭头函数参数括号 默认avoid 可选 avoid| always
// avoid 能省略括号的时候就省略 例如x => x
// always 总是有括号
"arrowParens": "avoid",
//每行最多多少个字符换行
"printWidth": 300,
// JSX标签闭合位置 默认false
// false: <div
// className=""
// style={{}}
// >
// true: <div
// className=""
// style={{}} >
"jsxBracketSameLine": true
},
"js-beautify-html": {
"wrap_attributes": false
}
},
// html 文件格式化
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// javascript 文件格式化
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// json 文件格式化
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 开发工具颜色主体
"workbench.colorTheme": "Material Theme Darker",
// vue 文件格式化
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 开发工具图标主体
"workbench.iconTheme": "vscode-icons",
// 在没有从上一会话中恢复出信息的情况下, 控制启动时显示的编辑器, none: 在启动时不打开编辑器
"workbench.startupEditor": "none",
// 终端字号大小
"terminal.integrated.fontSize": 16,
// 终端字体加粗
"terminal.integrated.fontWeight": 700,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 编辑器用户指定设置
"editor.tokenColorCustomizations": {
"comments": {
// 设置字体样式 加粗 下划线 斜体等
"fontStyle": "bold", // bold underline italic
// 设置字体颜色
"foreground": "#00A23C"
},
// 关键字
"keywords": {
// 设置字体样式 加粗 下划线 斜体等
"fontStyle": "bold" // bold italic underline
}
// "variables": "#f00", // 变量名
// "strings": "#e2d75dbd", // 字符串
// "functions": "#5b99fcc9", // 函数名
// "numbers": "#AE81FF" // 数字
},
"explorer.confirmDragAndDrop": false
}vue路由懒加载
安装
npm install --save-dev @babel/plugin-syntax-dynamic-import配置babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
// 添加路由懒加载配置
plugins: ['@babel/plugin-syntax-dynamic-import']
}使用index.js
const Login = () => import('@/views/Login.vue')常用cmd命令
slmgr.vbs -dlv: 查看windows激活情况的详细说明
slmgr.vbs -xpr: 查看windows是否已永久激活
slmgr.vbs -dli: 查看winidows激活情况的概要说明
dxdiag: 打开DirectX诊断窗口
gpedit.msc: 打开本地组策略编辑器
nslookup: IP地址侦测器
explorer: 打开资源管理器
devmgmt.msc: 打开设备管理器窗口
logoff: 注销计算机
shutdown -p: 立即关机
shutdown -s -t 30: 30秒倒计时关机
shutdown -a: 立即终止自动关机
shutdown -r -t 30: 30秒自动重启
services.msc: 打开服务窗口
lusrmgr.msc: 打开本地用户和组
cleanmgr: 磁盘清理
compmgmt.msc: 打开计算机管理窗口
calc: 打开计算器
notepad: 打开记事本
mspaint: 打开画图
control: 打开控制面板
ipconfig: 查看ip地址信息（在cmd窗口里面）
regedt32 或 regedit : 打开注册表编辑器
msconfig: 打开系统配置窗口
desk.cpl: 打开设置-->显示
firewall.cpl: 打开Windows Defender防火墙窗口
eventvwr: 打开事件查看器窗口网站
现代JavaScript教程：https://zh.javascript.info/
MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
ES6入门：http://caibaojian.com/es6/README_about.html
腾讯云开发者手册：https://cloud.tencent.com/developer/devdocs
JavaScript代码规范：https://github.com/fex-team/styleguide/blob/master/javascript.md
软件下载站：https://www.rjsos.com/单行文本超出省略号代替显示
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;双行文本超出省略号代替显示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;引入网页图标
/* 先将图标 favicon.ico 放到根目录下，图标格式必须是 .ico */
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />初始化样式
// out: false
/* 初始化样式 */
/* 清除内外边距 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
header,
nav,
main,
aside,
footer,
menu,
ul,
ol,
li,
dl,
dt,
dd,
form,
input,
textarea {
margin: 0;
padding: 0;
line-height: 1;
box-sizing: border-box;
}
/* 页面主体 */
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
font: 16px 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', "\5B8B\4F53", sans-serif;
color: #333;
background-color: #fff;
}
/* 链接去掉下划线 */
a {
text-decoration: none;
color: #333;
}
/* 列表项去掉前面指示点 */
li {
list-style-type: none;
}
/* 去掉默认边框和聚焦时的边框 */
input,
textarea,
button {
outline: none;
border: none;
}
/* 文本域禁止拖拽 */
textarea {
resize: none;
}
/* 图片取消默认基线对齐 */
img {
width: 100%;
height: 100%;
vertical-align: middle;
border: none;
}
/* 修正默认倾斜文字 */
em,
i {
font-style: normal;
}
/* 按钮上鼠标默认小手样式 */
button {
cursor: pointer;
}
/* 自定义左浮动 */
.fl{
float: left;
}
/* 自定义右浮动 */
.fr {
float: right;
}
/* 单行文本超出省略号代替显示 */
.ellipsis-1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 双行文本超出省略号代替显示 */
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}移动适配
<meta name = "viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">Less
// less 文件中引入其他的 less 文件，.less 可省略
@import url(../css/index1.less);
// 定义变量
@color_1: pink;
@color_2: green;
@font_30: 30px;
@width: 300px;
@height: 200px;
@font_weight: 700;
// 使用变量
.box1 {
width: @width;
height: @height;
background-color: @color_1;
// 表示当前选择器
&:hover {
background-color: skyblue;
}
}
.box2 {
width: @width;
height: @height;
font-size: @font_30;
background-color: @color_2;
color: @color_1;
font-weight: @font_weight;
}
/* 根据 less 文件生成的 css 代码 */
.box1 {
width: 300px;
height: 200px;
background-color: pink;
}
.box2 {
width: 300px;
height: 200px;
font-size: 30px;
background-color: green;
color: pink;
font-weight: 700;
}
加滚动条
/* 方式一：根据内容的多少自动添加 */
overflow: auto;
/* 方式二：不根据内容的多少，强制添加 */
overflow: scroll;隐藏滚动条
::-webkit-scrollbar {
display: none;
}鼠标样式
/* 系统默认光标，通常是一个小白箭头 */
cursor: default;
/* 小手光标，食指向上的小手 */
cursor: pointer;
/* 移动光标，带方向的十字 */
cursor: move;
/* 禁用光标 */
cursor: not-allowed;
/* 隐藏光标 */
cursor: none;
/* 文本样式，大写的I样式 */
cursor: text;
/* 等待光标 */
cursor: wait;
/* 十字光标 */
cursor: crosshair;
/* 帮助光标，通常是一个带问号的小白箭头 */
cursor: help;
/* 浏览器设置的光标 */
cursor: auto;
/* 自定义光标，url()内是光标的路径 */
cursor: url("xxx/xxx");双伪元素清除浮动
/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}单伪元素清除浮动
/* 单伪元素清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)