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
- test_files文件夹中的文件是用来demo的测试文件。
- eslintrc.js是eslint与prettier的配置文件。
3.package-lock.json是npm开发环境相关配置（完全不需要手动生成）。
4.package.json是npm配置文件。
二、安装相关依赖包。
demo可以直接使用npm进行依赖安装。
解释
package.json目前用到的主要作用。
- 描述依赖包。类似这样：
"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安装所有项目依赖。
- 类似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
执行
- 在demo项目下建立package.json。
- 在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
}
- 在根目录下执行
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文件夹，并在其中：
- 创建
.eslintrc.js。 -
.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
执行
- 建立文件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
- 建立一个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命令了。但是为了方便我们的使用，我们需要进行一些简单配置。
执行
- 在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语法检查。
- 终端中运行命令
npm run eslint。
如果没问题的话，已经可以得到一堆报错，需要进行修改（约19个）。 - 先不管他，终端执行命令
npm run format-code
如果没有问题，结束时代码已经自动进行了修正。 - 再次运行
npm run eslint。
此时你会发现报的错误已经只剩（5）个。 - 手动根据提示尝试修改剩余的错误。
六、关于语法检查与自动format的问题
请尝试修改配置，进行html文件的eslint检查并发现问题（剧透，eslint没法解决jinja2的解析）。
目前的情况下，我们有没有方式在jinjia2中最大程度的使用语法检查与自动format?
七、前端js断点调试test文件准备
解释
chrome支持断点调试、包括js断点、dom动作断点等等。我们只需要了解这两种，应该已经够我们的所有调试工作了。
执行
- 在
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>
-
将这个文件拖动到chrome中或者用你能想到的一切方式用chrome打开它。
此时它是这样的：
image.png
点击按钮后是这样的：
image.png
- 右键点击检查，或者按f12调出console，切换到Sources面板。点击我们的网页
breakpoints_test.html
image.png
-
在这两个位置左侧鼠标点击一下。
image.png
点击的位置会变成蓝色。
-
刷新网页。你会发现网页在断点js打的断点部分停止了。并且右侧按钮也是可以点击的。
右侧按钮从左到右分别是继续执行、step over、step in、step out、step next（不需要解释，应该都了解）。
- 此时把鼠标放到页面中js中的各个变量上时会显示各个变量的数值。同时，如果打开console面板，输入你想要查看的变量，或者用此时已经注册的变量、函数进行调试，都是可以直接执行的。
- 我们直接点击step over，然后点击页面上的button。我们会发现页面又一次终止，并且听到button执行的那个函数上。我们接下来就可以进行断点调试了。
断点调试问题
以上我们只说明了关于函数上的断点。事实上dom如果有变化也是可以断点，并监控断点时dom的变化的。当然这点在我看来用处不是那么大，因为我们现在还不执著与css与dom的变化。
那么如果对dom的变化进行断点调试，请自行尝试。
github链接：代码地址
网友评论