npm请自行安装（安装node.js自带）
本tutorial中所有大环节将分为解释、示例、动手三个环节。动手请自行执行。

一、安装npm与demo结构

-test_files
--html_file_test.html
--js_file_test.js
--vue_file_test.vue
-.eslintrc.js
-.gitignore
-package-lock.json
-package.json

1. test_files文件夹中的文件是用来demo的测试文件。
2. eslintrc.js是eslint与prettier的配置文件。
   3.package-lock.json是npm开发环境相关配置（完全不需要手动生成）。
   4.package.json是npm配置文件。

二、安装相关依赖包。

demo可以直接使用npm进行依赖安装。

解释

package.json目前用到的主要作用。

1. 描述依赖包。类似这样：

  "devDependencies": {
    "eslint": "^5.6.1",
  }

npm 项目依赖控制在文件package.json与package-lock.json中。
lock文件类似pipenv的lock文件，开发环境使用，只需要安装时使用参数--save-dev，则文件中自动添加依赖。

• npm正常安装的命令是npm install **
• npm的global安装命令是npm install -g **
• npm的开发环境安装命令是npm install --save-dev **

如果在项目根目录下配置好package.json文件，则可以直接运行npm --save-dev安装所有项目依赖。

2. 类似makefile的命令缩写。

  "scripts": {
    "eslint": "eslint test_files/*.js test_files/*.vue",
  }

package.json中的scripts中的部分可以通过npm run来执行。
比如：执行npm run eslint相当于执行eslint test_files/*.js test_files/*.vue

执行

1. 在demo项目下建立package.json。
2. 在package.json中输入以下内容。

{
  "name": "breakpoints_eslint",
  "version": "1.0.0",
  "description": "demo for breakpoints and eslint",
  "scripts": {
  },
  "author": "yourname",
  "devDependencies": {
    "ajv": "^5.5.2",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.6.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-html": "^4.0.6",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^7.0.1",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.0.0-beta.3",
    "prettier-eslint-cli": "^4.7.1",
    "vue-eslint-parser": "^3.2.2"
  },
  "dependencies": {},
  "license": "tutorial",
  "private": true
}

3. 在根目录下执行npm install、npm install --save-dev之一，则自动安装完毕所有依赖。（会自动生成lock文件。）
   此时你的项目目录应该是这样的:

-node_modules
-package.json
-package-lock.json

三、eslint配置文件

解释

eslint会自动查找.eslintrc.js文件并引入其中的配置（prettier一样）。
具体配置选项请自行eslint官网doc查询。
需要注意的是原生的eslint支持js文件的解析，我们需要使用vue-eslint-parse来对文件进行解析，用来支持单文件vue与js，所以配置项中需要引入。

执行

创建test_files文件夹，并在其中：

1. 创建.eslintrc.js。
2. .eslintrc.js中写入如下代码：

 module.exports = {
    "root": true,
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint",
        "sourceType": "module",
        "allowImportExportEverywhere": false
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended",
    ],
    "plugins": [
        "standard",
        "promise",
    ],
    "env": {
        "browser": true,
        "node": true,
        "es6":true,
        "jquery":true
    },
    "globals": {
        "Vue": true,
        "AMap": true,
        "tdist": true,
        "EXIF": true,
        "j_body": true,
        "native": true,
        "VueRouter": true,
        "pocketPost": true,
        "aliCnCityList": true,
    },
    "rules": {
        // prettier规则
        "no-console": 0,
        "no-useless-escape": 0,
        "no-multiple-empty-lines": [
          2,
          {
            "max": 3
          }
        ],
        "prettier/prettier": [
          "error",
          {
            "singleQuote": true,
            "semi": false,
            "trailingComma": "none",
            "bracketSpacing": true,
            "jsxBracketSameLine": true,
            "insertPragma": true,
            "requirePragma": false
          }
        ],
        // eslint规则
        "no-unused-vars": [2, { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
        "no-debugger": [2],
        "no-unreachable": [2],
        "no-extra-semi": [2],
    }
};

此时你得项目应该是：

-package.json
-package-lock.json
-.eslintrc.js

四、建立示例文件

解释

我们要建立html、js、vue三种类型的文件用来测试我们的eslint与prettier

执行

1. 建立文件html_file_test.html

{% extends 'xx.html' %}
{% import "xx" as wtf %}
{% block xxx%}
    <div
        id = "ids"
        class="d-md-flex flex-md-equal pl-md-3"
    >
        <div>
            <div>
                <br>
            </div>
        </div>
    </div>
<script>
var variant_page_data={{variant_page_data | tojson}}
var app = new Vue({
    el: '#ids',
    data: {
        testdata:""
    },
    methods: {
        upload_data:function(){
              console.log("test")
            }
    },
})
</script>
{% endblock %}

这是一个jinja2+vue的html

2. 建立一个js文件js_file_test.js

/** @format */
let a=1
let b=2
console.log(eval("a+b"))

3.建立一个vue文件

<!-- @format -->

<template>
    <div v-for = "a in test_data" class="test_attr">
    </div>
</template>
<script>
export default {
  name: 'InputVariantForm',
  data() {
    return {
      test_data: {
          name: "test1",
          job: "test_lint",
      },
    }
  },
  methods: {
      test_function(){
          console.log("test_log")
      }
  }
}
</script>

五、执行检查与format

解释

此时已经可以直接执行eslint与prettier-eslint命令了。但是为了方便我们的使用，我们需要进行一些简单配置。

执行

1. 在package.json中添加代码块

  "scripts": {
    "eslint": "eslint test_files/*.js test_files/*.vue",
    "format-code": "prettier-eslint --write \"test_files/*.js\" \"test_files/*.vue\""
  },

test_files/*.js test_files/*.vue的意思是test_files中的所有js与vue文件进行eslint语法检查。

2. 终端中运行命令npm run eslint。
   如果没问题的话，已经可以得到一堆报错，需要进行修改（约19个）。
3. 先不管他，终端执行命令npm run format-code
   如果没有问题，结束时代码已经自动进行了修正。
4. 再次运行npm run eslint。
   此时你会发现报的错误已经只剩（5）个。
5. 手动根据提示尝试修改剩余的错误。

六、关于语法检查与自动format的问题

请尝试修改配置，进行html文件的eslint检查并发现问题（剧透，eslint没法解决jinja2的解析）。
目前的情况下，我们有没有方式在jinjia2中最大程度的使用语法检查与自动format?

七、前端js断点调试test文件准备

解释

chrome支持断点调试、包括js断点、dom动作断点等等。我们只需要了解这两种，应该已经够我们的所有调试工作了。

执行

1. 在test_files中建立breakpoints_test.html文件。

<!DOCTYPE html>
<html>
  <head>
    <title>
      breakpoints_test
    </title>
  </head>
  <body>
    <div>
      <p>
        You could die if I punch you!（我这一拳下去你可能会死！）
      </p>
      <p id="demo">
      </p>
      <button type="button" onclick="actions()">
       What can you do?
      </button>
    </div>
  </body>
  <script>
    console.log("test1")
    function TestEval(x, y){
        return x+y
    }
    function TestFunc(z){
        let c = TestEval(1, 2)
        return z + c
    }
    function actions(){
        document.getElementById("demo").innerHTML=("You can jump!")
    }
    console.log(TestFunc(3))
  </script>
</html>

2. 将这个文件拖动到chrome中或者用你能想到的一切方式用chrome打开它。
   此时它是这样的：

   
   image.png
   

   点击按钮后是这样的：

   
   image.png
3. 右键点击检查，或者按f12调出console，切换到Sources面板。点击我们的网页breakpoints_test.html
   image.png

4. 在这两个位置左侧鼠标点击一下。

   
   image.png
   

   点击的位置会变成蓝色。

5. 刷新网页。你会发现网页在断点js打的断点部分停止了。并且右侧按钮也是可以点击的。

   
   
   

   右侧按钮从左到右分别是继续执行、step over、step in、step out、step next（不需要解释，应该都了解）。

6. 此时把鼠标放到页面中js中的各个变量上时会显示各个变量的数值。同时，如果打开console面板，输入你想要查看的变量，或者用此时已经注册的变量、函数进行调试，都是可以直接执行的。
7. 我们直接点击step over，然后点击页面上的button。我们会发现页面又一次终止，并且听到button执行的那个函数上。我们接下来就可以进行断点调试了。

断点调试问题

以上我们只说明了关于函数上的断点。事实上dom如果有变化也是可以断点，并监控断点时dom的变化的。当然这点在我看来用处不是那么大，因为我们现在还不执著与css与dom的变化。
那么如果对dom的变化进行断点调试，请自行尝试。

github链接：代码地址