前端--日常使用

vscode 编辑器

Visual Studio Code（简称“VS Code” ）可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

常用插件
1.该图圈出为必安装插件，Vetur适用vue用户使用

常用代码片段
1.点击vscode左下角设置—>选择用户代码片段—>点击新建全局代码片段文件(配置文件名，例如:vue.json)
注释规范化 VUE模板

{
"vue-template": {//模板名称
        "prefix": "vue",//触发条件
        "body": [//内容
                        "<!--",
                        "* @description  ${1:参数1}",
                        "* @fileName  ${TM_FILENAME_BASE}",
                        "* @author userName",
                        "* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
                        "!-->",
                        "<template>",
                        "  <div id='${TM_FILENAME_BASE}'",
                        "\t\t\t class='${TM_FILENAME_BASE}'>",
                        "  </div>",
                        "</template>",
                        "",
                        "<script>",
                        "export default {",
                        "  props: { // 父辈向子辈传参",
                        "  },",
                        "  name: '${TM_FILENAME_BASE}',",
                        "  data () {",
                        "    return {",
                        "",
                        "    }",
                        "  },",
                        "  created () { // 实例被创建之后执行代码",
                        "",
                        "\t},",
                        "  computed: { // 计算属性",
                        "",
                        "\t},",
                        "  components: { // 组件的引用",
                        "",
                        "\t},",
                        "  methods: { // 方法",
                        "",
                        "\t},",
                        "  mounted () { // 页面进入时加载内容",
                        "",
                        "\t},",
                        "  watch: { // 监测变化",
                        "",
                        "\t}",
                        "}",
                        "</script>",
                        "<style scoped lang='scss'>",
                        "</style>"
        ],
        "description": "vue代码片段" //描述
}
}

日常写注释在method中的方法模板 之一

VUE文件中method中的方法注释/**
*@Author: 作者名",

*@Date:${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",

* @description: 方法描述

* @param {参数类型} 参数名称

* @param {参数类型} 参数名称

* @return 没有返回信息写 void / 有返回信息 {返回类型} 描述信息

*/

VUE文件中method中的方法注释，步骤和常用代码片段下说明的序号1一致

{
  "Print to js method": {
    "prefix": "vuezs",
    "body": [
      "/*",
      " *@Author: 作者名",
      " *@Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " *@description: $0",
      " *@param {参数类型} 参数名称",
      " *@param {参数类型} 参数名称",
      " *@return 没有返回信息写 void / 有返回信息 {返回类型} 描述信息",
      "*/"
    ],
    "description": "A function comment"
  }

在项目根目录下创建.vscode文件夹，里面创建一个settings.json文件，内容如下：

{ // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.fontSize": 16,
    // "editor.detectIndentation": false,
    // 重新设定tabsize
    // "editor.tabSize": 2,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    // #每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {undefined
            "language": "vue",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {undefined
        "source.fixAll.eslint": true
    },
    "i18n-ally.localesPaths": [
        "lang"
    ],
}
// "editor.codeActionsOnSave": {undefined
//     "source.fixAll.eslint": true
// }
// }

GIT 应用软件

链接: git
最原始的 Git 是运行在 Linux 终端上的应用软件。然而,得益于 Git 是开源的,并且拥有良好的设计,世界各地的开发者都可以为 Git 设计不同的访问界面。

SVN 应用软件

链接: svn
通过采用分支管理系统的高效管理，简而言之就是用于多个人共同开发同一个项目，实现共享资源，实现最终集中式的管理。

Node.js JavaScript 运行环境

链接: node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

淘宝镜像：npm install cnpm -g --registry=http://registry.npm.taobao.org cnpm -v cnpm install

NotePad++ 轻量级代码编辑器（类似记事本）

在较低的 CPU 功率下，也可以达到很好的编辑效率。相比 Windows 自带的记事本，NotePad++ 对程序员更友好

Snipaste 截图工具

下载并打开Snipaste,按下F1来开始截图,再按F3,截图就在桌面置顶显示了,方便设计、程序编程