# web_js_html **Repository Path**: sperolik/web_js_html ## Basic Information - **Project Name**: web_js_html - **Description**: 前端的开发笔记，包括html,css,js以及vscode的使用。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2022-04-26 - **Last Updated**: 2022-06-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: JavaScript ## README # 前端开发笔记vscode篇 # 快捷键 ## 多个匹配 ``` ctrl+shift+l ``` ## 删除一行 ``` ctrl+d 原：ctrl+shift+k ``` ## 向上/下复制 ``` shift+alt up/down ``` ## 多个光标 ``` alt+点击/双击 ``` ``` 多行光标 ctrl+alt+ up/down(arrow) ``` ``` 选中多行 ctrl+shift+ up/down ``` ``` 移动上下行 alt+ up/down ``` ## 查找 ``` ctrl+f ``` ## 关闭窗口 ``` ctrl+w ``` ## 分割窗口 ``` ctrl+alt+ left/right ``` ## 打开资源窗口（全局） ``` win+e ``` ## 打开前目录cmd ``` ctrl+shift+c ``` # 基本插件 ## 1. 汉化 ``` ms-ceintl.vscode-language-pack-zh-hans ``` ## 2. 运行代码 ``` formulahendry.code-runner ``` ## 3. 拼写检查 ``` streetsidesoftware.code-spell-checker ``` ## 4. 成对标签修改 ``` formulahendry.auto-rename-tag ``` ## 5. css ``` ecmel.vscode-html-css ``` ## 6. Alt+B 在默认浏览器打开html ``` techer.open-in-browser ``` ## 7. 注释 TODO 可标志进度 ``` gruntfuggly.todo-tree ``` ## 8. 代码格式化 shift+alt+f ``` hookyqr.beautify ``` ## 9. 彩虹括号 ``` coenraads.bracket-pair-colorizer-2 ``` ## 10. 智能代码 ``` visualstudioexptteam.vscodeintellicode ``` ## 11. 右键>色彩选定 000-fff ``` royaction.color-manager ``` ## 12. less to css ``` mrcrowl.easy-less ``` # html快速创建 ## 1.生成一个带有id的div标签 ``` div#dome ``` ```html
``` ## 2.生成一个带有class的div标签 ``` div.dome ``` ```html
``` ## 3.生成一个带有特定属性的标签 ``` a[href="www.baidu.com"] ``` ```html ``` ## 4.生成一个标签有内容的div ``` div{内容} ``` ```html
内容
``` ## 5.在div标签里嵌套一个p标签 ``` div>p ``` ```html

``` ## 6.给div创建一个兄弟标签h1 ``` div+h1 ``` ```html

``` ## 7.给span标签生成父级元素div的同级元素p ``` p^div.span ``` ```html

``` ## 8.分组操作符 ``` (div.box>(img[src=img/loading.gif].img))*1 ``` ```html
``` ## 9.乘法操作符 ``` div>ui>li*10 ``` ```html
``` ## 10.自动计数 ``` div>ui>li{$}*10+p{如果生成两位数则使用两个连续的 $$ ，更多位数以此类推。} ``` ```
``` ## 11.自动添加单词 ``` div>ul>li>lorem4*5 ``` ```html
``` # settings.json(推荐) **直接替换vscode的设置文件即可** ```json { "editor.cursorSmoothCaretAnimation": true, "window.restoreWindows": "all", "extensions.autoUpdate": false, "cSpell.userWords": [ "Adjc", "Colorstr", "DGRAM", "Dreamweaver", "Endlink", "MAXV", "MAXVE", "Nums", "Photoshop", "Referer", "Treer", "af", "apily", "booticon", "content", "conth", "delnodel", "deta", "flormain", "getfloor", "getpid", "handletap", "hanlde", "httpd", "imread", "imshow", "inet", "itemid", "joinus", "linknoke", "loginbar", "main", "maxp", "mutex", "navre", "orde", "orhos", "orst", "qrcode", "qsize", "recvfrom", "regsiter", "scrollspy", "sdges", "searh", "sendto", "slidemove", "slieder", "strftime", "strptime", "stry", "submenu", "subnav", "swiper", "tabbar", "tabindex", "tabs", "tabs content", "userinfo", "vexs", "viel", "wday", "wxss", "xyjc" ], "files.AutoGuessEncoding":true, "editor.largeFileOptimizations": false, "update.enableWindowsBackgroundUpdates": false, "update.mode": "none", "telemetry.enableCrashReporter": false, "telemetry.enableTelemetry": false, "http.proxyStrictSSL": false, "http.proxySupport": "off", "update.showReleaseNotes": false, "files.enableTrash": false, "workbench.enableExperiments": false, "editor.renderWhitespace": "none", "editor.minimap.enabled": false, "files.autoSave": "afterDelay", "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "editor.hover.enabled": false, "editor.hover.sticky": false, "editor.parameterHints.enabled": false, "kite.showWelcomeNotificationOnStartup": false, "python.analysis.logLevel": "Warning", "python.autoUpdateLanguageServer": false, "python.jediEnabled": false, "editor.smoothScrolling": true, "editor.find.seedSearchStringFromSelection": false, "editor.formatOnPaste": true, "workbench.tips.enabled": false, "terminal.integrated.cursorBlinking": true, "terminal.integrated.cursorStyle": "line", "comments.openPanel": "neverOpen", "editor.mouseWheelZoom": true, "debug.console.fontSize": 16, "files.autoSaveDelay": 400, "editor.lineHeight": 24, "editor.letterSpacing": 0.5, "editor.codeActionsOnSaveTimeout": 500, "editor.renderLineHighlight": "all", "extensions.autoCheckUpdates": false, "workbench.editor.tabSizing": "shrink", "editor.cursorBlinking": "phase", "code-runner.runInTerminal": true, "code-runner.saveFileBeforeRun": true, "code-runner.executorMap": { // "java": "cd $dir && javac -d. $fileName && java app.$fileNameWithoutExt", }, "code-runner.showRunCommandInEditorContextMenu": false, "code-runner.showRunCommandInExplorerContextMenu": false, "editor.renderControlCharacters": false, "C_Cpp.commentContinuationPatterns": [ "D:\\cpp\\Dev-Cpp\\MinGW64\\bin" ], "remote.extensionKind": { }, "python.experiments.optOutFrom": [ ], "workbench.activityBar.visible": false, "window.menuBarVisibility": "toggle", "html.format.unformatted": "", "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "editor.defaultFormatter": "vscode.html-language-features", "html.format.endWithNewline": true, "html.format.indentHandlebars": true, "html.format.indentInnerHtml": true, "prettier.insertPragma": true, "prettier.requirePragma": true, "editor.find.autoFindInSelection": "multiline", "files.associations": { "/path to file/*.extension": "language", "*.html": "html", "*.py": "python", "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript", "*.java": "java" }, "python.pythonPath": "D:\\Python3.7\\python.exe", "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "less.compile": { "outExt": ".css" // "outExt": ".wxss" }, "workbench.iconTheme": "material-icon-theme", "launch": { }, "terminal.integrated.detectLocale": "off", "todo-tree.tree.showScanModeButton": false, "[json]": { "editor.defaultFormatter": "HookyQR.beautify" }, "window.autoDetectHighContrast": false, "todohighlight.include": [ "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.html", "**/*.php", "**/*.css", "**/*.scss" ], "git.ignoreMissingGitWarning": true, "files.exclude": { "**/.classpath": true, "**/.project": true, "**/.settings": true, "**/.factorypath": true }, "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, "java.semanticHighlighting.enabled": true, "sync.gist": "a05462f54a2d4e3a4c2776035a64d088a75cdaba", "[wxml]": { "editor.defaultFormatter": "qiu8310.minapp-vscode" }, "auto-rename-tag.activationOnLanguage": [ "*" ], "code-runner.languageIdToFileExtensionMap": { }, "maven.executable.preferMavenWrapper": false, "maven.excludedFolders": [ ], "java.home":"D:\\Java14", "java.configuration.maven.userSettings": "D:\\Java\\apache-maven-3.6.3\\conf\\settings.xml", "maven.executable.path": "D:\\Java\\apache-maven-3.6.3\\bin\\mvn", "maven.terminal.customEnv": [ { "environmentVariable": "JAVA_HOME\\bin", "value": "D:\\Java\\jdk\\bin" } ], "java.project.importOnFirstTimeStartup": "automatic", "editor.codeActionsOnSave": null, "files.autoGuessEncoding": true, "path-intellisense.autoSlashAfterDirectory": true, "path-intellisense.extensionOnImport": true, "path-intellisense.showHiddenFiles": true, "typescript.suggest.paths": false, "path-intellisense.mappings": { "/": "${workspaceFolder}", "lib": "${workspaceFolder}/lib", "global": "/Users/dummy/globalLibs" }, "cssPeek.peekFromLanguages": [ "html", "django-html", "laravel-blade", "razor", "vue", "blade", "pug", "jade", "handlebars", "php", "twig", "md", "nunjucks", "javascript", "javascriptreact", "erb", "typescript", "typescriptreact", "HTML (Eex)", "html-eex", "ejs", "css" ], "workbench.colorCustomizations": { // "editor.selectionBackground": "#e057b0ad", //选中高亮 // "editor.background": "#C7EDCC", //背景颜色 }, "editor.tokenColorCustomizations":{ "comments": "#6a9955", // 注释的颜色 // "keywords": "#0a0", // 关键字颜色 // "strings": "#1e27a4a1", // 字符串颜色 // "variables": "#d76060", // 变量名 "functions": "#5b99fcc9", // 函数名 "numbers": "#AE81FF" // 数字颜色 }, // 括号颜色 修改这些代码即可 "bracket-pair-colorizer-2.colors": [ "LightSkyBlue", // 第一个括号颜色, 蓝色 "#b316da", // 第二个括号颜色 "#d43a3a", // 第三个括号颜色 "#23e146", "#d92682", "Orchid", "#25da67", "#da2525" ], "security.workspace.trust.untrustedFiles": "open", "python.languageServer": "Microsoft", "terminal.integrated.copyOnSelection": true, "java.debug.settings.stepping.skipClasses": [ ], "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": [ "${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe" ], "args": [], "icon": "terminal-cmd" }, "Git Bash": { "source": "Git Bash" }, "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe (migrated)": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "args": [] } }, "terminal.integrated.defaultProfile.windows": "PowerShell", "code-runner.preserveFocus": false, "editor.fontLigatures": null, "explorer.confirmDragAndDrop": false, "editor.suggest.snippetsPreventQuickSuggestions": false, "C_Cpp.default.systemIncludePath": [ "D:\\cpp\\Dev-Cpp\\MinGW64\\bin" ], "code-runner.executorMapByFileExtension": { ".vb": "cd $dir && vbc /nologo $fileName && $dir$fileNameWithoutExt", ".vbs": "cscript //Nologo", ".scala": "scala", ".jl": "julia", ".cr": "crystal", ".ml": "ocaml", ".exs": "elixir", ".hx": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt", ".rkt": "racket", ".scm": "csi -script", ".ahk": "autohotkey", ".au3": "autoit3", ".kt": "cd $dir && kotlinc $fileName -include-runtime -d $fileNameWithoutExt.jar && java -jar $fileNameWithoutExt.jar", ".kts": "kotlinc -script", ".dart": "dart", ".pas": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt", ".pp": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt", ".d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt", ".hs": "runhaskell", ".nim": "nim compile --verbosity:0 --hints:off --run", ".csproj": "dotnet run --project", ".fsproj": "dotnet run --project", ".lisp": "sbcl --script", ".kit": "kitc --run", ".v": "v run", ".vsh": "v run", ".sass": "sass --style expanded", ".cu": "cd $dir && nvcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", ".ring": "ring" }, "tabnine.experimentalAutoImports": true } ```