前端-环境搭建

node环境

1.node官网：
Node.js (nodejs.org) 运行检查：node -v      npm -v  命令

2.npm镜像: 
cnpm替换npm:npm install -g cnpm --registry=https://registry.npm.taobao.org
或直接使用:npm install --registry=https://registry.npm.taobao.org

3.如果安装依赖报错提示脚本被禁止执行，可以更改执行策略解决：set-ExecutionPolicy RemoteSigned    ---Y

node版本管理工具-nvm

nvm是一个node的版本管理工具，可以简单操作node版本的切换、安装、查看等等。

1.安装nvm之前要先完全卸载node

2.nvm github下载地址

3.环境变量（安装到非C盘） path: 找到nvm文件位置，打开setting文件 配置镜像源

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

4.nvm使用:

• 在刚刚的nvm文件位置打开cmd

• 输入以下代码查看nvm可安装的node版本

nvm ls                      // 看安装的所有node.js的版本
nvm list available          // 查显示可以安装的所有node.js的版本

• 安装所对应的版本 nvm install 版本号 // 例如：nvm install 14.19.0

• 切换到安装的版本 nvm use 版本号 // 切换到使用指定的nodejs版本

• 检测是否切换完成，新开一个cmd node -v

• nvm常用命令

nvm list 是查找本电脑上所有的node版本
nvm list 查看已经安装的版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm install 安装最新版本nvm
nvm use <version> ## 切换使用指定的版本node
nvm ls 列出所有版本
nvm current显示当前版本
nvm alias <name> <version> ## 给不同的版本号添加别名
nvm unalias <name> ## 删除已定义的别名
nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包
nvm on 打开nodejs控制
nvm off 关闭nodejs控制
nvm proxy 查看设置与代理
nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror，如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是： https://github.com/npm/npm/archive/.
nvm uninstall <version> 卸载制定的版本
nvm use [version] [arch] 切换制定的node版本和位数
nvm root [path] 设置和查看root路径
nvm version 查看当前的版本                   

vscode编辑器

必装插件

1.chinese language pack for vscode：中文语言包
2.open in browser：右键选择默认浏览器打开html文件
3.SynthWave '84：代码主题（强力推荐）
4.easy less：less插件
5.vetur：可以解决vue代码为全白色并且没有代码提示以及格式化代码
6.Vue Language Features (Volar)：vue3的代码格式化插件
7.Code Translate：hover单词时会自动翻译的插件
8.GitLens：git插件，可以显示每行代码的详细提交信息
9.live server： 会创建一个服务器供html文件使用。

自定义代码片段

设置中找到配置用户代码片段->新建全局代码片段文件->输入新文件名称（vue3）

{

    "vue3": {
    "prefix": "vue3",
    "body": [
            "<script lang=\"ts\" setup>"
            ""
            "</script>"
            ""
            ""

            "<template>"
            ""

            "</template>"
            ""
            ""

            "<style lang=\"scss\" scoped>"
            ""

            "</style>"
    ],
    "description": ""
  }
}

配置好后在vue文件中输入vue3就会出现代码片段的提示。

eslint&perttier

// package.json
"@rushstack/eslint-patch": "^1.1.0",
"@typescript-eslint/eslint-plugin": "^5.17.0",
"@typescript-eslint/parser": "^5.17.0",
"@vue/eslint-config-typescript": "^10.0.0",
"eslint": "^8.5.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-vue": "^8.5.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"prettier": "^2.6.2"

// .eslintignore
node_modules
.vscode
dist
.eslintrc.cjs
.prettier.cjs

// .eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  overrides: [
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser'
      },
      rules: {
        'no-undef': 'off'
      }
    }
  ],
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    '@vue/eslint-config-typescript/recommended'
  ],
  env: {
    'vue/setup-compiler-macros': true
  },
  // parser: '@typescript-eslint/parser',
  rules: {
    'no-console': 'warn',
    // 'no-debugger':process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境不能有 debugger
    semi: [2, 'never'], // 禁止在语句末尾使用分号 (除了消除以 [、(、/、+ 或 - 开始的语句的歧义)
    'comma-dangle': 'off', // 对象、数组最后不必有逗号
    'no-param-reassign': ['error', { props: false }], // 不可直接对函数参数赋值，但是修改参数的属性值
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'import/prefer-default-export': 'warn', // 单一导出时，可以不是默认导出
    'linebreak-style': 'off', // 不区分 CRLF 和 LF
    'vue/no-v-html': 'off', // vue 模板中允许使用 v-html
    'arrow-parens': 'off', // 箭头函数中一个参数时，可以省略括号
    'wrap-iife': 'off', // 不必用括号包裹立即执行的函数表达式（IIFE）
    'no-nested-ternary': 'off', // 允许三目表达式的嵌套
    'no-plusplus': 'off',
    'no-restricted-syntax': [
      // 覆写 airbnb no-restricted-syntax 规则: 允许使用for..of
      'error',
      {
        selector: 'ForInStatement',
        message:
          'for..in 的会访问原型链，建议用 Object.{keys,values,entries} 代替'
      },
      {
        selector: 'LabeledStatement',
        message: 'Labels 是GOTO的一种形式；使用标签会使代码混乱且难以维护'
      },
      {
        selector: 'WithStatement',
        message:
          '`with` 不允许在 strict mode 使用，因为它将使得代码变得难以预测和优化'
      }
    ],
    'no-restricted-properties': [
      2,
      {
        // 此规则采用对象列表，其中指定了对象名称和属性名称：
        object: 'disallowedObjectName',
        property: 'disallowedPropertyName'
      }
    ],
    'vue/multi-word-component-names': 'off', // vue组件名称可以为单个词
    'vue/no-multi-spaces': 'error', // vue 模板中不允许出现多个空格
    'vue/html-indent': ['error'], // vue模板严格缩进
    'vue/html-self-closing': 'off', // vue 模板中对html原生的单标签可以自闭合
    'vue/html-quotes': ['error', 'double'], // vue模板中属性必须使用双引号
    'vue/max-attributes-per-line': 'off', // vue模板中不必每个属性另起一行
    'vue/singleline-html-element-content-newline': 'off', // vue模板中，元素内容，可以不另起一行
    'vue/mustache-interpolation-spacing': 'error', // vue模板中，插值表达式 '{{' 后和 '}}'前必须有空格
    'bracketSameLine': false,// 首标签结尾的尖括号 > 单列一行
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-empty-function': 'off', // 关闭空方法检查
    '@typescript-eslint/no-explicit-any': 'off', // 关闭any类型的警告
    'vue/no-v-model-argument': 'off',
    // 'vue/block-lang': ['error', { script: { lang: 'ts' } }] // script 的lang 必须为ts
    // 'vue/component-tags-order': [
    //   'error',
    //   {
    //     order: ['route', 'script', 'template', 'style'] // vue组件，tag顺序必须为 script，template，style
    //   }
    // ],
  }
}

// .prettierignore

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

.prettierrc.cjs

/**
 * 代码格式化配置
 */
module.exports = {
  // 指定每个缩进级别的空格数
  tabWidth: 2,
  // 使用制表符而不是空格缩进行
  useTabs: false,
  // 在语句末尾打印分号
  semi: false,
  // 使用单引号而不是双引号
  singleQuote: true,
  // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
  quoteProps: 'as-needed',
  // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
  trailingComma: 'none',
  // 在对象文字中的括号之间打印空格
  bracketSpacing: true,
  // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
  arrowParens: 'avoid',
  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
  rangeStart: 0,
  rangeEnd: Infinity,
  // 指定要使用的解析器，不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 换行设置 always\never\preserve
  proseWrap: 'preserve',
  // 指定HTML文件的全局空格敏感度 css\strict\ignore
  htmlWhitespaceSensitivity: 'css',
  // Vue文件脚本和样式标签缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
  endOfLine: 'lf'
}

vscode插件: ESlint,Prettier - Code formatter

// vscode的setting.json

{
    "workbench.colorTheme": "SynthWave '84",
    // "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "editor.fontSize": 15,
    // "window.zoomLevel": 1,
    "editor.wordWarp": "on",
    // #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    //  换行属性
    "prettier.printWidth": 100,
    // 不尾随分号
    "prettier.semi": false,
    // 使用单引号
    "prettier.singleQuote": true,
    // 多行逗号分割的语法中，最后一行不加逗号
    "prettier.trailingComma": "none",
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "vscode.html-language-features"
    },
    "explorer.confirmDelete": false,
    "volar.codeLens.scriptSetupTools": true,
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.editor.enablePreview": false,
    "[markdown]": {
      "editor.defaultFormatter": "Vue.volar"
    },
    "editor.fontLigatures": false,
    "window.zoomLevel": 1,
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

git

官网安装git后，sourcetree---git图形化工具推荐sourcetree

首次使用git，配置用户信息：
1.配置用户名：`git config --global user.name "your name"`;
2.配置用户邮箱：`git config --global user.email "youremail@github.com"`;
常用命令：
1.列出当前配置：`git config --list`;
2.列出repository配置：`git config --local --list`;
3.列出全局配置：`git config --global --list`;
4.列出系统配置：`git config --system --list`;
5.查看分支：`git branch`
6.创建分支：`git branch 分支名`
7.切换分支：`git checkout 分支名`
8.新建并切换到新建分支上：`git checkout -b 分支名`
9.删除分支：`git branch -d 分支名`
10.合并分支：`git merge 被合并得分支`

git操作流程：

1.从远程git仓库克隆项目：`git clone <url>`

2.提交工作区所有文件到暂存区：`git add .`
--提交工作区中指定文件到暂存区：`git add <file1> <file2> ...`;
--提交工作区中某个文件夹中所有文件到暂存区：`git add [dir]`;

3.将暂存区中的文件提交到本地仓库中，即打上新版本：`git commit -m "描述信息"`;
--将所有已经使用git管理过的文件暂存后一并提交，跳过add到暂存区的过程：`git commit -a -m "描述信息"`;
--提交文件时，发现漏掉几个文件，或者注释写错了，可以撤销上一次提交：`git commit --amend`;

我们可以创建一个名为 .gitignore 的文件，列出要忽略的文件模式。

# 此为注释 – 将被 Git 忽略
# 忽略所有 .a 结尾的文件
*.a
# 但 lib.a 除外
!lib.a
# 仅仅忽略项目根目录下的 TODO 文件，不包括 subdir/TODO
/TODO
# 忽略 build/ 目录下的所有文件
build/
# 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt
doc/*.txt
# 忽略 doc/ 目录下所有扩展名为 txt 的文件
doc/**/*.txt