首页 > 其他分享 >『手撕Vue-CLI』编码规范检查

『手撕Vue-CLI』编码规范检查

时间:2024-05-17 13:41:25浏览次数:22  
标签:选项 编码 Vue CLI ... 代码 ESLint your eslint

前言

这篇为什么是编码规范检查呢?因为这是一个很重要的环节,一个好的编码规范可以让代码更加清晰易读,在官方的 VUE-CLI 也是有着很好的编码规范的,所以我也要加入这个环节。

其实不管在哪个项目中,编码规范都是很重要的,像我们平日里的项目开发当中,我们也会使用 ESLint 来进行代码规范检查。

代码规范检查

在前段这一块当中我想大家都知道 ESLint 这个工具,它是一个代码规范检查的工具,我们可以通过配置文件来配置我们的代码规范。

在 Vue-CLI 中也是有着 ESLint 的配置的,我们可以在项目中找到 .eslintrc.js 这个文件,这个文件就是 ESLint 的配置文件。

所以废话不多说直接开干,推进 Nue-CLI 的开发。这一篇先来实现代码规范检查。

安装 ESLint

首先需要安装 ESLint,可以通过 npm 来进行安装。

npm install eslint --save-dev

在安装的过程中我遇到了问题,安装的时候报错,发现淘宝的镜像源域名过期了,从 registry.npm.taobao.org 改为 registry.npmmirror.com 就可以了。

初始化 ESLint

安装完成之后我们需要初始化 ESLint,可以通过 npx eslint --init 来进行初始化。

npx eslint --init

初始化 ESLint 配置

Need to install the following packages

首先它会询问你 Need to install the following packages,这个意思是需要安装一些依赖包,我们可以选择 Yes 来进行安装。

这个配置项,我在备文章的时候出来了,如果没有出来的话,忽略即可

How would you like to use ESLint? ...

在初始化的过程中可以选择自己的配置,首先要选择的 How would you like to use ESLint? ... 这个选项,我选择的是 To check syntax, find problems, and enforce code style

因为我们是要检查语法,找到问题并且强制执行代码风格。

What type of modules does your project use? ...

然后选好之后按回车进入到下一个选项,这个选项是 What type of modules does your project use? ...,我选择的是 CommonJS (require/exports),因为我是 Node.js 项目,我要用到模块化。

Which framework does your project use? ...

然后选好之后按回车进入到下一个选项,这个选项是 Which framework does your project use? ...,我选择的是 None of these,因为我没有用到框架。

Does your project use TypeScript? ...

然后选好之后按回车进入到下一个选项,这个选项是 Does your project use TypeScript? ...,我选择的是 No,因为我没有用到 TypeScript。

Where does your code run? ...

然后选好之后按回车进入到下一个选项,这个选项是 Where does your code run? ...,我选择的是 Node,因为我是 Node.js 项目。

这里有一个注意点,出现这个选项的时候默认是给你勾上 Browser 的,这个时候你需要按 Space 键来取消勾选(也就是键盘的空格键)去掉了之后在减键盘方向键下键来选中 Node,然后按空格勾选上 Node(不录制 GIF 了我相信我的文字表达已经很OK了):

How would you like to define a style for your project? ...

好了继续往下看,然后选好之后按回车进入到下一个选项,这个选项是 How would you like to define a style for your project? ...,意思是你要如何定义你的项目风格,我选择的是 Use a popular style guide

Which style guide do you want to follow? ...

好了继续往下看,然后选好之后按回车进入到下一个选项,这个选项是 Which style guide do you want to follow? ...,意思是你要遵循哪个代码风格指南,我选择的是 Airbnb

Airbnb 在 GitHub 有 141.6k 的 star,是一个非常受欢迎的代码风格指南。

What format do you want your config file to be in? ...

好了继续往下看,然后选好之后按回车进入到下一个选项,这个选项是 What format do you want your config file to be in? ...,意思是你的配置文件要使用什么格式,我选择的是 JavaScript

继续往下看出现了:

Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2
? Would you like to install them now with npm? » No / Yes

Would you like to install them now with npm? 意思是你要现在安装这些依赖吗?我选择的是 Yes

选择了 yes 之后再按回车,好大功告成了。

最后我再附上一张我所选择的配置的截图(供大家参考):

总共有 9 个步骤,选择的配置如上图所示。

之后会在项目中生成一个 .eslintrc.js 文件,这个文件就是 ESLint 的配置文件。

测试

eslint 配置内容创建好了,我们在项目当中配置好 ESLint 这里我以 IDEA 为例(jetbrains 系列的编辑器),打开 settings,搜索 ESLint,然后勾选 Automatic ESLint configuration,这样就可以自动配置 ESLint 了。

主要按照我如上的规范去做的去配置的,那么设置好了 IDEA 的配置项之后会自动配置好根据 ESLint 的配置文件来进行代码规范检查。

我们打开之前在 bin 目录下创建的 index.js 文件,然后写一些不符合规范的代码,比如:

console.log('Hello Nue-CLI');

然后保存之后会发现 IDEA 会提示我们的代码不符合规范,这样就说明我们的代码规范检查已经生效了,会爆红!

解决办法就是在文件中鼠标右键,然后选择 Fix ESLint Problems,然后 IDEA 会自动帮我们修复代码。

可以看到我们的代码已经符合规范了。

这里告诉大家一个 IDEA 设置小技巧,就是我们保存代码的时候 IDEA 自动去执行 Fix ESLint Problems,这样我们就不用手动去执行了。

打开 IDEA 的设置,搜索 save auto,找到 tools -> Actions on save,然后勾选 Run eslint --fix,这样我们保存代码的时候 IDEA 就会自动帮我们修复代码了。

好了本文就介绍这么多,下一篇在来继续实现我们自己的 Nue-CLI。

标签:选项,编码,Vue,CLI,...,代码,ESLint,your,eslint
From: https://www.cnblogs.com/BNTang/p/18197644

相关文章

  • vue3 ts 集成 tinymce
    首先引入@tinymce/tinymce-vueyarnadd@tinymce/tinymce-vue-S我的版本是然后写一个组件<template><mainid="sample"><Editorv-model="editorData"api-key="j7tvgx4xnptg3cjd63cfnl62z9s78uylw4o7vkkwdljjy91e":init=&qu......
  • Vue3:Cannot read properties of null (reading 'isCE')
    Cannotreadpropertiesofnull(reading'isCE')  这个问题是在vue3中引入elementui的列表框时出现的。经过网上查询,有说是装了两个vue版本的,也有说是其他代码写错导致的,还有说是导入错误的。  但我的不是这个问题,我的是版本兼容问题。因为在网上查询时看到,elementui适......
  • antd-vue 时间选择器限制, 选择不超过七天的范围,且默认时间为当前时间往后七天
    1.template代码<a-range-picker v-model:value="conversationTime" style="margin-right:20px" :disabledDate="disabledDate" @calendarChange="onCalendarChange" @change="onChange" @openChange......
  • 基于Vue3水印组件封装:防篡改守护!
    基于Vue3的全新水印通用组件。这款组件不仅功能强大,而且易于集成,能够轻松为您的网页或应用添加自定义水印,有效防止内容被篡改或盗用。在线查看效果:原文可查看效果地址一,编写watermark组件<template><divref="watermarkContainerRef"class="watermark-container">......
  • vue的响应式数据1
     所花时间(包括上课): 1 h左右代码量(行): 200   左右搏客量(篇):1了解到的知识点: 用ref定义响应式数据备注(其他): ref基本类型的响应式数据首先需要import{ref}from'vue'哪个需要响应式,哪一个加ref('name')在函数中调用响应式数据的时候,需要......
  • python的一些常用编码技巧(持续更新)
    语法问题我常用的库函数1copy库importcopycopy.deepcopy()2、list库fromtypingimportList获取迭代对象的第一个值方法一:使用list方法my_dict={'a':1,'b':2,'c':3}first_key=list(my_dict.keys())[0]print(first_key)#输出:'a'方法二:使......
  • npm包 - 发布vue组件
    npm包-发布vue组件 一. 环境准备npminstall-g@vue/cli  二. 创建项目vuecreatevue-page-card-drag 本文使用vue2 三. 开发组件/加入组件可以将已经编写好的组件移动到components目录下,或者新建一个vue组件,步骤是一样的。例如我这里新建了一个Hello......
  • vue-cli项目处理vant自适应问题
    原因vant自带的样式,用的单位是px,无法自适应。一般有两种处理思路。一、写媒体查询安装插件postcss-pxtorem:用于将单位px转化为rem//安装命令npmi-Dpostcss-pxtoremlib-flexible:给html标签设置font-size,作为rem基准值(因为我的项目已经脚本处理了,所以我是没有......
  • vue复制粘贴功能
    第一种【推荐】npminstallclipboard--save<template><div><inputtype="text"v-model="copyText"/><button@click="copyToClipboard">复制到剪贴板</button></div></template><......
  • windows端Clion + gdb server 远程调试
    环境信息:window安装clion:版本2023.2.2ubantu:20.04.6,ip为:192.168.11.128c++项目信息:在clion中新建最简单的c++项目搭建远程调试环境项目目录如下:修改的文件只有main.cpp和Makefilemain.cpp如下,增加一个循环用于调试#include<iostream>intmain(){st......