比如：属性顺序、小于 1 的小数要不要去掉 0、选择器之间要不要加空格… 不过要细细的追究，校验的东西还是挺多的，比如 List of rules 列出了好多需要校验的规则。...object: true, }, { enforceForRenamedProperties: false, }, ], // 用对象的解构赋值来获取和使用对象某个或多个属性值.../ 在对象的属性中， 键值之间要有空格 'no-trailing-spaces': 'error', // 行末不要空格 'no-multiple-empty-lines': 'error...commit git add . git commit -m "feat: 新增校验commit信息、eslint规范提示、自动格式化代码" 出现这些信息就表示已经通过校验并提交了 husky > commit-msg...(node v14.16.0) [feat_infrastructure 78aefc7] feat: 新增校验commit信息、eslint规范提示、自动格式化代码 5 files changed
ESLint 是什么 ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，是一个用来检查代码的工具。...image.png 取消 Format on Save 另外，需要将 Format on Save 这个选项的勾选状态去掉，否则会影响 eslint 的自动保存 image.png ESLint 的特点...每一个规则都是一个插件并且你可以在运行时添加更多的规则 内置规则和自定义规则共用一套规则 API。 内置的格式化方法和自定义的格式化方法共用一套格式化 API。...ESLint 支持几种格式的配置文件： JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。...package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。 如果同一个目录下有多个配置文件，ESLint 只会使用一个。
它的目标是提供一个插件化的javascript代码检测工具。 为什么要使用Eslint ESLint 是一个开源的 JavaScript 代码检查工具,。...正则表达式中不允许出现多个连续空格 2 quote-props 对象中的属性名是否需要用引号引起来 2 no-sparse-arrays 数组中不允许出现空位置 2 no-unreachable...不允许用\来让字符串换行 2 no-global-assign 不允许重新分配原生对象 2 no-new 不允许new一个实例后不赋值或者不比较 2 no-new-func 不允许使用new...）、TypeScript 等； 如何使用 想要使用别人的配置通常只需要下载对应的依赖并且加入到extends继承下来即可，可以配置为字符串或者数组均可。...Eslint自动修复，那么我们如何自动修复呢？
root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格（tab | space...，是几个空格，选择2个； printWidth：当行字符的长度，推荐80，也有人喜欢100或者120； singleQuote：使用单引号还是双引号，选择true，使用单引号； trailingComma...：在多行输入的尾逗号是否添加，设置为 none，比如对象类型的最后一个属性后面是否加一个，； semi：语句末尾是否要加分号，默认值true，选择false表示不加； { "useTabs": false...比如在 prettier 中规定在代码保存的时候自动格式化代码，使得所有得单引号变为双引号，但是我们在 eslint 中规定的是，不可以是双引号。这就不符合 eslint 的规范了。...安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装） npm install eslint-plugin-prettier eslint-config-prettier
1.4.3、自动打开浏览器 server.open 类型： boolean | string 在开发服务器启动时自动在浏览器中打开应用程序。当此值为字符串时，会被用作 URL 的路径名。...preview.open 类型： boolean | string 默认： server.open 开发服务器启动时，自动在浏览器中打开应用程序。当该值为字符串时，它将被用作 URL 的路径名。...添加一个插件 若要使用一个插件，需要将它添加到项目的 devDependencies 并在 vite.config.js 配置文件中的 plugins 数组中引入它。.../* eslint eqeqeq: 0, curly: 2 */ 这个例子与上一个例子相同，只是它使用了数字代码而不是字符串值。关闭 eqeqeq 规则，curly 规则设置为错误。...（4）、配置注释 配置注释可以包括描述，以解释为什么注释是必要的。描述必须出现在配置之后，并以两个或多个连续的 - 字符与配置分开。比如。
初学者玩转 TypeScript系列，总计 21 期，点赞、收藏、评论、关注、三连支持！...npm install --save-dev @typescript-eslint/eslint-plugin 创建配置文件§ ESLint 需要一个配置文件来决定对哪些规则进行检查，配置文件的名称一般是..."autoFix": true }, ], "typescript.tsdk": "node_modules/typescript/lib" } 就可以在保存文件后，自动修复为...一行最多 100 字符 printWidth: 100, // 使用 4 个空格缩进 tabWidth: 4, // 不使用缩进符，而使用空格 useTabs:...为什么有些定义了的变量（比如使用 enum 定义的变量）未使用，ESLint 却没有报错？§ 因为无法支持这种变量定义的检查。
loader：npm install eslint-loader --save-devnpm install eslint --save-dev添加 eslint 配置内容，修改 webpack 核心配置文件的内容如下...，其它的属性可以先不看，规则的配置项都在该属性当中进行配置：图片配置的内容大概就是说检查的 ECMAScript 的版本为 6、7、8、9、10，当然不是强制性的要求用的语法都是该版本的语法，只是告诉它将来可能会用这些语法...，还有一个就是说每段代码的最后都要添加一个分号来进行结尾, 最终修改好的代码如下：const name = 'BNTang';console.log(name);打包成功, 当然你在放开了 eslint...的检查发现提示的错误内容都是英文的那么对于英文不好的人而言，就是淡淡的忧伤，其实 eslint 提供了一个自动修复的功能，就是在 options 配置项当中有一个 fix 的属性，设置为 true：图片代表的含义就是说如果你在编写...JS 代码的时候，那么 eslint 发现了错误内容之后就会自动的帮你修复所对应的错误内容，那么真的有这么神奇吗？
~ 等难以理解的运算符 // @off 有些时候会用到 if (!!...组件内方法必须按照一定规则排序 // @off 不需要限制 'react/sort-comp': 'off', // jsx 的 props 缩进必须为四个空格...ESLint 和 StyleLint 工具提供了自动修复功能，可以修复简单的错误如少了分号，多了空格，缩进不正确等 但要注意的是，自动修复某些时候可能会使代码发生逻辑或语法错误，需谨慎使用（自动修复后一定一定一定记得比对代码...安装 ESLint-Formatter 以支持自动修复检查的错误 ? 新增一个构建任务，可命名为，StyleLint-Fix.sublime-build 以支持自动修复检查的错误 ?...使用 ESlint-formatter进行自动修复JS ?
如下所示，它引入了两个文件以及Vue官方要求的插件作为一个对象时必须提供的install方法。 import Observer from '....* @param label 事件名称 * @param callback 回调函数 * @param vm this对象 * @return {boolean}...默认值为false this.reconnection = this.opts.reconnection || false // 最大重连次数，默认值为无穷大 this.reconnectionAttempts...// 如果处于重连状态且事件为onclose时调用重连方法 if (this.reconnection && eventType === 'onclose') { this.reconnect...=== 'json' && event.data) { // 将data从json字符串转为json对象 msg = JSON.parse(event.data)
逗号后面有一个空格。...eslint: no-new-wrappers const message = new String('hello') // ✗ avoid 全局对象的属性不用于函数调用。...eslint: no-with with (val) {...} // ✗ avoid 对象属性的换行应一致。...事实上，它被解析为 i; ++j，而不是 i++; j。 第三条很好理解。if (x)\ny() 等于 if (x) { y() }。这个语句直到遇到一个语句块或语句才结束。...自动分号补齐，ASI
通过 Parser 把源码解析成 AST 对象树，源码字符串中的各种信息就被保存到了这个对象树里，然后遍历 AST，对每一部分做检查就能实现 Lint 的功能，而自动 fix 的功能则是基于字符串替换实现的...我们写一个 eslint 的 rule 来检查大括号的格式并自动修复成同一行的格式。...false 是不查找配置文件， fix 为 false 是不自动修复。...为什么 Eslint 可以检查格式 Babel 不可以 我们写了一个检查大括号格式的 rule，可以发现能够做格式检查关键是能找到关联的 token。...并且通过 fixer 的字符串替换做了自动修复。
if语句如果没有包大括号不会加大括号，会从两行转为一行 多个import后面加一个空行 字符串使用单引号 缩进为2个空格 未定义的变量会报错 箭头函数前后需要空格 未使用的变量会报错 standard...2个空格 字符串使用单引号 自动把import引入的包放在了最上面 多个Import之间有空行，最后一个import之后不会有空行 未定义的变量会报错 箭头函数前后需要空格 未使用的变量会报错 alloy...规则特点 不去掉分号 字符串使用单引号 相对上面两个力度较小，import没有自动提到最上面， 未定义的变量不会报错 缩进为2个空格 箭头函数前后没有空格要求 未使用的变量会报错 eslint:recommended...使用此规则的方式见下面 ：eslint+prettier配合配置 大概看出的几个共同点 都会把没有改变过的变量从let定义改为const定义 字符串都转为单引号 该有的空格都有 未使用的变量会报错 ...了解配合配置的方式，先来了解几个npm包 插件： eslint-plugin-prettier 作用：一个形式上跟standard类似的一个代码规则，用来在基础规则上扩展的规则，eslint的rules
配置文件 Prettier 支持 .prettierrc 为名称，以 .yaml .yml .json .js 为后缀的的配置文件，当然你也可以使用 package.json 文件中的 Prettier...module.exports = { printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80 tabWidth: 2, //一个tab代表几个空格数...匹配任意单个字符 [name] 匹配name中的任意一个单一字符 [!...之间的任意一个整数, 这里的num1和num2可以为正整数也可以为负整数 属性 indent_style 设置缩进风格(tab是硬缩进，space为软缩进) indent_size 用一个整数定义的列数来设置缩进的宽度...，如果indent_style为tab，则此属性默认为tab_width tab_width 用一个整数来设置tab缩进的列数。
不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。 this....，且要求对象字面量的冒号和值之间存在一个空格。...-- Comment Text --> … 3.1.2 模块注释 一般用于描述模块的名称以及模块开始与结束的位置。 注释内容前后各一个空格字符， 3.2 CSS 文件注释 3.2.1 单行注释 注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行。...Comment Text/ .jdc { display: block; } .jdc { display: block;/Comment Text/ } 3.2.2 模块注释 注释内容第一个字符和最后一个字符都是一个空格字符
根目录创建.prettierrc文件，能够写入YML、JSON的配置格式，并且支持.yaml/.yml/.json/.js后缀； 根目录创建.prettier.config.js文件，并对外export一个对象...； 在package.json中新建prettier属性。...module.exports = { "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80 "tabWidth": 2, //一个tab代表几个空格数，默认为80..."useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减 "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号...行位是否使用分号，默认为true "trailingComma": "none", //是否使用尾逗号，有三个可选值"" "bracketSpacing": true, //对象大括号直接是否有空格
为选择器分组时，将单独的选择器单独放在一行。 为了代码的易读性，在每个声明块的左花括号前添加一个空格。 声明块的右花括号应当单独成行。 每条声明语句的 : 后应该插入一个空格。...对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。...对象尽量静态化，一旦定义，就不得随意添加新的属性。...如果添加属性不可避免，要使用Object.assign方法。...当函数为静态函数时，必须添加@static；当函数有参数时，必须使用@param；当函数有返回值时，必须使用@return。
tab等于2个空格，行高为24px workbench是针对vscode的主题设置 例如 iconTheme（ 图标风格）：使用插件 vscode-great-icons （需搜索安装）...任何 wxss 后缀的文件被认为是 css 文件 ，然后 vscode 会用 css 规则匹配 wxss 文件，对 css 的属性排序，rem 自动转换，格式化等 "files.associations...singleQuote": false, // 单引号 // "semi": true, // 未尾封号 // "trailingComma": "none", // es5:object和array最后一个属性后面...， "editor.formatOnSave": true, // 当你输入特定字符时，是否自动格式化代码，(比如输入 `;` 和 `}`)....npm install –save-dev eslint-plugin-html eslint-plugin-react 要么删除此项配置，要么配置为你自己的校验规则地址 "eslint.options
，请确保lint-staged里，eslint的执行顺序放在前面 需要安装husky 和 lint-staged这两个依赖才能实现，其中husky是帮助我们添加git hooks的工具，而lint-staged...可配置选项 module.exports = { // 1.一行代码的最大字符数，默认是80(printWidth: ) printWidth: 80, // 2.tab宽度为2空格...（trailingComma: ""） trailingComma: 'es5', // 9.object对象里面的key和value值和括号间的空格(bracketSpacing...但是在js，python这些语言里面，单引号双引号都可以用字符串，就没必要一定遵循这个强迫症了。 shell和powershell这两种语言里面用单引号表示纯字符串，双引号则是可以添加变量的字符串。...用单引号可以少按一个shift，方便一些 html中用的是双引号，所以js区分一下，用单引号。 其他默认的配置符合我使用习惯的也有可以讨论的： 关于tab用几个空格的讨论我选择用两个空格。
8C%E5%B7%A5%E5%85%B7-CLI Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。...to lint your code 那么我们在写代码时必须严格遵守 JavaScript Standard Style 代码风格的语法规则： 使用两个空格 – 进行缩进 字符串使用单引号 – 需要转义的地方除外...变量必须声明后再使用 函数的参数不能有同名属性，否则报错 不能使用with语句 不能对只读属性赋值，否则报错 不能使用前缀 0 表示八进制数，否则报错 不能删除不可删除的属性...arguments不会自动反映函数参数的变化 不能使用arguments.callee 不能使用arguments.caller 禁止this指向全局对象 不能使用fn.caller.../router' Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ // 获取节点对象 el:
不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。 this....，且要求对象字面量的冒号和值之间存在一个空格。... 复制代码 3.1.2 模块注释 一般用于描述模块的名称以及模块开始与结束的位置。 注释内容前后各一个空格字符， 表示模块开始， 复制代码 3.2 CSS 文件注释 3.2.1 单行注释 注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行。...return element } 复制代码 3.3.3 注释空格 注释内容和注释符之间需要有一个空格，以增加可读性。eslint: spaced-comment。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
