前端手记-工具盒子

VSCode快捷键 {#vscode快捷键}

VSCode插件 {#vscode插件}

Turbo Console Log {#turbo-console-log}

Turbo Console Log 插件通过自动化写入有意义的日志消息的操作，让你在调试时输出变量更加简单，不用再输入 console.log()，而是可以直接通过快捷键。

JavaScript 数组方法 {#javascript-数组方法}

1、map 方法 {#1map-方法}

map 方法用于创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const hungryMonkeys = ["🐒", "🦍", "🦧"];const feededMonkeys = hungryMonkeys.map((m) => m + "🍌");console.log(feededMonkeys);// [ '🐒🍌', '🦍🍌', '🦧🍌' ]

方法使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

2、filter 方法 {#2filter-方法}

filter 方法会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

const guests = ["👩👨", "👩👩", "👨", "👩", "👨👨"];const singles = guests.filter((g) => g.length / 2 === 1);console.log(singles);// [ '👨', '👩' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

3、some 方法 {#3some-方法}

some 方法用于测试数组中是不是至少有 1 个元素通过了被提供的函数测试。

const participants = ["🔇", "🔇", "🔊", "🔇", "🔊"];const isLoud = (p) => p === "🔊";const troubles = participants.some(isLoud);console.log(troubles);// true

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some

4、every 方法 {#4every-方法}

every 方法用于检测数组所有元素是否都符合函数定义的条件。

const visitors = ["👨", "👽", "👨", "👨", "🤖"];const isHuman = (e) => e === "👨";const onlyHumans = visitors.every(isHuman);console.log(onlyHumans); // false

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every

5、push 方法 {#5push-方法}

push 方法用于向数组的末尾添加一个或多个元素，并返回新的长度。

const animals = ["🐂", "🐒", "🐔"];
animals.push("🐴", "🐑");console.log(animals);// [ '🐂', '🐒', '🐔', '🐴', '🐑' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push

6、concat 方法 {#6concat-方法}

concat 方法用于合并两个或多个数组，返回一个新数组。

const dogs = ["🐶", "🐶"];const cats = ["🐱", "🐱", "🐱"];const pets = dogs.concat(cats);console.log(pets);// [ '🐶', '🐶', '🐱', '🐱', '🐱' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

7、unshift 方法 {#7unshift-方法}

unshift 方法用于向数组的开头添加一个或更多元素，并返回新的长度。

let train = ["🚃", "🚃", "🚃", "🚃"];
train.unshift("🚂");console.log(train);// [ '🚂', '🚃', '🚃', '🚃', '🚃' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

8、 splice 方法 {#8-splice-方法}

splice 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。

let weather = ["☁️", "🌧️", "☁️"];
weather.splice(1, 2, "☀️");console.log(weather);// [ '☁️', '☀️' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

9、slice 方法 {#9slice-方法}

slice 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。

const solutionsOfClassmates = ["📃", "📑", "📄", "📝"];const myOwnSolutionReally = solutionsOfClassmates.slice(2, 3);console.log(myOwnSolutionReally);// [ '📄' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

10、reverse 方法 {#10reverse-方法}

reverse 方法将数组中元素的位置颠倒，并返回该数组。

let rabbitWins = ["🐇", "🦔"];const hedgehogWins = rabbitWins.reverse();console.log(hedgehogWins);// [ '🦔', '🐇' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

11、sort 方法 {#11sort-方法}

sort 方法用于对数组元素进行排序，并返回这个数组。

const books = ["📕", "📗", "📕", "📒", "📗", "📒"];
books.sort();console.log(books);// [ '📒', '📒', '📕', '📕', '📗', '📗' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

12、join 方法 {#12join-方法}

join 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串。

const devices = ["💻", "🖥️", "🖥️", "💻", "🖨️"];const network = devices.join("〰️");console.log(network);// 💻〰️🖥️〰️🖥️〰️💻〰️🖨️

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join

13、includes 方法 {#13includes-方法}

includes 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

const food = ["🥦", "🥬", "🍅", "🥒", "🍩", "🥕"];const caught = food.includes("🍩");console.log(caught);// true

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

14、flat 方法 {#14flat-方法}

flat 方法用于拍平嵌套数组对象。

const savings = ["💵", ["💵", "💵"], [[["💰"]]]];const loot = savings.flat(3);console.log(loot);// [ '💵', '💵', '💵', '💰' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

15、fill 方法 {#15fill-方法}

fill 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，不包括终止索引。

let seeds = ["🌱", "🌱", "🌱", "🌱", "🌱"];
seeds.fill("🌳", 1, 4);console.log(seeds);// [ '🌱', '🌳', '🌳', '🌳', '🌱' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

16、from 方法 {#16from-方法}

from 方法用于从一个类数组或可迭代对象创建一个新的浅拷贝的数组实例。

const wild = "🐻🐯🦁";const tamed = Array.from(wild);console.log(tamed);// [ '🐻', '🐯', '🦁' ]

使用文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

error Delete `␍` prettier/prettier 错误解决方案 {#error-delete--prettierprettier-错误解决方案}

问题根源：

罪魁祸首是git的一个配置属性：core.autocrlf

由于历史原因，windows下和linux下的文本文件的换行符不一致。

Windows在换行的时候，同时使用了回车符CR(carriage-return character)和换行符LF(linefeed character)
而Mac和Linux系统，仅仅使用了换行符LF
老版本的Mac系统使用的是回车符CR

因此，文本文件在不同系统下创建和使用时就会出现不兼容的问题。

git项目仓库中默认是Linux环境下提交的代码，文件默认是以LF结尾的(工程化需要，统一标准)。

用windows电脑git clone代码的时候，若我的autocrlf(在windows下安装git，该选项默认为true)为true，那么文件每行会被自动转成以CRLF结尾，若对文件不做任何修改，pre-commit执行eslint的时候就会提示删除CR。

现在可以理解ctrl+s和yarn run lint --fix方案为何可以修复eslint错误了吧，因为Git自动将CRLF转换成了LF。

解决方法：

git config --global core.autocrlf false

git全局配置之后，重新拉取代码

vscode settings.json {#vscode-settingsjson}

{
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "explorer.compactFolders": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "native-ascii-converter.auto-conversion-on-activate": true,
  "native-ascii-converter.auto-conversion-on-save": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "material-icon-theme",
  "liveServer.settings.fullReload": true,
  "liveServer.settings.CustomBrowser": "microsoft-edge",
  "explorer.confirmDelete": false,
  "editor.inlineSuggest.enabled": true,
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": true,
    "markdown": false,
    "javascript": true
  },
  "sync.gist": "fa5fda9ebbbc1371f874eae2f7114bb6",
  "sync.autoUpload": true,
  "terminal.integrated.enableMultiLinePasteWarning": false,
  "tabnine.experimentalAutoImports": true,
  "[python]": {
    "editor.formatOnType": true
  },
  "fileheader.LastModifiedBy": "lijing",
  "fileheader.Author": "lijing",
  "fileheader.tpl": "/*\\n * @Desc:   \\n * @Author: {author}    \\n * @Date:   {createTime}    \\n */",
  "settingsSync.ignoredExtensions": [],
  /* 压缩设置 */
  "liveSassCompile.settings.formats": [
    {
      /* expanded OR compressed  生成文件的输出样式 */
      "format": "expanded",
      /* 附加到输出文件的扩展名 */
      "extensionName": ".min.css",
      /* 
      最终保存路径取决于三个设置：savePath、savePathSegmentKeys和savePathReplaceSegmentsWith。但是，savePath优先于所有三个。
      使用savePath
      /以or开头\表示路径是相对于工作区根目录的
      ~/以or开头~\表示相对于正在处理的文件
      使用savePathReplacementPairs
      找到的任何键都将直接替换为它的值。为了保存错误的匹配项，我建议以斜线开始和结束
      */
      "savePath": "/css" // 为 null 表示当前目录
    }
  ],
  /* 排除目录 */
  /* 使用各种 glob 模式的数组来排除文件或整个文件夹。所有匹配的 SASS/SCSS 文件或匹配的文件夹都将被忽略 */
  "liveSassCompile.settings.excludeList": [
    "/**/node_modules/**",
    "/.vscode/**"
  ],
  /* 是否生成对应的map */
  "liveSassCompile.settings.generateMap": false,
  /* 是否添加兼容前缀 如： -webkit- , -moz- ... */
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
  ],
  /* 设置错误将显示在输出窗口中的日志记录级别 */
  "liveSassCompile.settings.showOutputWindowOn": "Debug",
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
  },
  "yaml.customTags": [
    "!And",
    "!And sequence",
    "!If",
    "!If sequence",
    "!Not",
    "!Not sequence",
    "!Equals",
    "!Equals sequence",
    "!Or",
    "!Or sequence",
    "!FindInMap",
    "!FindInMap sequence",
    "!Base64",
    "!Join",
    "!Join sequence",
    "!Cidr",
    "!Ref",
    "!Sub",
    "!Sub sequence",
    "!GetAtt",
    "!GetAZs",
    "!ImportValue",
    "!ImportValue sequence",
    "!Select",
    "!Select sequence",
    "!Split",
    "!Split sequence"
  ],
  "git.openRepositoryInParentFolders": "never",
  "workbench.editor.empty.hint": "hidden",
  "git.enableSmartCommit": true,
  // 修改注释颜色
  "editor.tokenColorCustomizations": {
    "comments": {
      "fontStyle": "italic",
      "foreground": "#50be7a"
    }
  },
  // 配置文件类型识别
  "files.associations": {
    "*.js": "javascript",
    "*.json": "jsonc",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "extensions.ignoreRecommendations": false,
  "files.exclude": {
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.hg": true,
    "**/.svn": true,
    "**/CVS": true,
    "**/node_modules": false,
    "**/tmp": true
  },
  // "javascript.implicitProjectConfig.experimentalDecorators": true,
  "explorer.confirmDragAndDrop": false,
  "typescript.updateImportsOnFileMove.enabled": "prompt",
  "git.confirmSync": false,
  "editor.tabSize": 2,
  "editor.fontWeight": "500",
  "[json]": {},
  "editor.tabCompletion": "on",
  "vsicons.projectDetection.autoReload": true,
  "editor.fontFamily": "Consolas, 'Microsoft YaHei', monospace",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.fontSize": 16,
  "debug.console.fontSize": 14,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.minimap.enabled": true,
  "emmet.extensionsPath": [
    ""
  ],
  // vue eslint start 保存时自动格式化代码
  "editor.formatOnSave": true,
  // eslint配置项，保存时自动修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll": 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,
  // eslint end
  // react
  // 当按tab键的时候，会自动提示
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.includeLanguages": {
    // jsx的提示
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
  },
  // end
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // @路径提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "git.ignoreMissingGitWarning": true}