zoukankan      html  css  js  c++  java
  • VsCode编辑器

    1、vscode代码保存时自动格式化成 ESLint风格(支持VUE)   :   http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html

       另,vscode中非webpack等一些构建工具项目,也可以使用eslint风格。但是需要额外安装eslint包,生成.eslintrc.*文件:  https://segmentfault.com/a/1190000009077086(亲测有效)

    npm install eslint --save-dev

        项目目录下创建一个 .eslintrc.* 的配置文件或 使用命令行(./node_modules/.bin/eslint --init,推荐这种方法)生成这个文件。具体规则可以自己根据需要定制的  https://www.cnblogs.com/yesu/p/7852527.html。 

    module.exports = {
        "env": {
            "browser": true,
            "commonjs": true,
            "es6": true
        },
        "extends": "eslint:recommended",
        "parserOptions": {
            "sourceType": "module"
        },
        "rules": {
            "indent": [
                "error",
                4
            ],
            "linebreak-style": [
                "error",
                "windows"
            ],
            "quotes": [
                "error",
                "single"
            ],
            "semi": [
                "error",
                "never"
            ]
        }
    };
    View Code

       重点:eslint包不依赖于webpack,依赖于node。node对项目结构没有侵入性,只是在根目录下生成一个 node_modules文件夹  和  package.json文件。eslint功能再添加一个配置文件。

       注意:eslint可以忽视指定某个或某类文件,创建 .eslintignore 文件进行配置。如:

    /build/
    /config/
    /dist/
    /static/js/*.js
    /*.js

    2、VSCODE编辑器常用插件推荐  : https://blog.csdn.net/Che_rish/article/details/78893019

    3、特殊功能 快捷方式:

      a、 js 的注释模板 (注意:新版的vscode已经原生支持,在function上一行输入 /** tab)

    4、vscode 调试node.js  :https://www.cnblogs.com/klsw/p/7765427.html

    我的常用插件:

      1、ESLint       配置: http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html

      2、Auto Close Tag

      3、Auto Rename Tag

      4、编辑器中文插件

      5、View In Browser    文件协议打开

      6、Live Server           本地服务器打开(这个服务器具有文件修改 自动刷新功能的。)

      7、Path Intellisense   自动路劲补全

      8、Bracket Pair Colorizer   让括号拥有独立的颜色,易于区分。可以配合任意主题使用。

      9、Vetur  vue文件的语法高亮

      10、Todo Tree            http://www.cnblogs.com/qiezuimh/p/9549545.html             显示代码中  TODOFIXME 的注释。(个人觉得可以只用TODO来标记,因为两个都是需要去改动代码的,所以都是未完成状态)

         11、Git Graph    版本树显示插件,比小乌龟git的好用。

    5、vscode编辑器,默认可以使用命令行,打开编辑器:https://www.jianshu.com/p/274ca1b20dc1

    code  base.conf   // 文件路径可以使用 tab 键自动补全的

    6、vscode快捷方式:https://www.cnblogs.com/schut/p/10461840.html

    1、F1 或 Ctrl+Shift+P(俗称万能键)  :打开命令面板。
    2、在 Ctrl+P 模式下输入 “?” 会弹出下拉菜:
    3、移动到行首:   Home;移动到行尾:   End
    4、移动到文件结尾:   Ctrl+End;移动到文件开头:   Ctrl+Home
    5、扩展/缩小选取范围: Shift+Alt+→ 和 Shift+Alt+←
    6、返回/前进:Alt + ←/→    

    注意:vscode 中编辑器设置中有  用户(就是全局设置) 和 工作区(只是对当前项目进行的设置,设置文件在.vscode文件夹内)两种。


    vsCode调试 nodejs 的程序:

    一、简单的nodejs程序调试 很好调试,这里略过。

    二、通过npm 命令 启动的程序,调试代码。

      1、vue-cli2 构建的项目:https://blog.csdn.net/My__God/article/details/82015385(亲测有效)

         配置 launch.json 即可:

    "configurations": [
        {
          "type": "node",
          "request": "launch",
          "cwd": "${workspaceFolder}",
          "name": "启动程序",
          "program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
          "args": [
            "--inline",
            "--progress",
            "--config",
            "build/webpack.dev.conf.js"
          ]
        }
      ]

      个人理解:npm run 命令会 到项目或全局上找cmd文件,执行基本;cmd 脚本 在去调用  node.exe  去执行相应的js文件。所以  npm命令 运行的node程序,都是要通过  node.exe  去执行 js 文件的。

           那么 根据  cmd 中的配置,找到node执行的  js文件,通过 debug模式  启动这个js程序,就可以进入程序的  debug模式了。

      2、

  • 相关阅读:
    机器视觉-halcon学习笔记1
    c#桌面窗体软件【学习笔记】
    Csharp学习笔记 重载
    unity学习笔记——第一人称
    Csharp学习笔记_kita (第二天)namespace
    try ,catch ,finally执行流程
    开发之统一异常处理
    git开发日常使用总结
    mysql5.7绿色版配置以及找不到 mysql服务问题解决
    正则表达式,将数据库字段转换为驼峰式
  • 原文地址:https://www.cnblogs.com/wfblog/p/9641687.html
Copyright © 2011-2022 走看看