首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端科普系列(5):ESLint - 守住优雅的护城河

逐一选择完 ESLint 的使用配置后,会在项目根目录生成 .eslintrc.js 配置文件,同时会安装需要的 npm 包。...console.log(sum); 同时,在 package.json 中,增加 eslint 命令 eslint src/** 来检查 src 目录下的所有文件。...2、常用配置规则 刚才在初始化之后,在项目根目录生成了 .eslintrc.js 文件,这里存放了所有 eslint 的配置项。...首先可以看到目录树上,有问题的文件变红,点开这个文件,对应的行上也会有错误提示,鼠标停留会提示错误的信息方便修复。...可以看到,index.vue 文件也已经变红,里面的错误也能够被检测了,并且在编辑器的“问题”栏也能显示项目所有的 7 条错误,和运行 npm run eslint 效果一样了。

2.3K51

Vscode笔记-24款插件

${fileExtname}:当前打开文件的拓展名,如.json ${cwd}: 启动时任务运行程序的当前工作目录 ${workspaceFolder}:表示当前workspace文件夹路径 ${workspaceRootFolderName...,并且调试npm script时非常有用 runtimeExecutable: 设置运行时可执行文件路径,默认是node 可以是其他的执行程序,如npm、nodemon runtimeArgs: 传递给运行时可执行文件的参数...,可让您快速浏览项目node_modules目录中的文件。...取消注释当前文档中由扩展名插入的所有日志消息的全部操作是按alt + shift + u 从当前文档中删除所有由扩展名插入的日志消息 要从当前文档中删除所有由扩展名插入的日志消息,只需按alt + shift...+ Opt + U | Cmd + Opt + E | Cmd + Opt + O | Browser Preview 预览 通过扩展安装后,当前机器上还必须有chrome浏览器才能正常预览调试使用

10.8K21
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    通过nodejs实现自定义命令

    通过篇文章,你将学会如何一步步地编写运行在弄的环境的自定义命令。 二、编写命令文件 新建一个文件夹cmd,然后建一个main.js文件,文件内容如下: #!...三、使用npm定制命令 先在cmd目录初始化npm npm init 然后在生成的package.json文件中添加以下内容: "bin":{ "mycmd": "main.js" }, 然后再运行...这时候,可以进入调试的目标项目,比如cmd-test文件夹,运行以下命令: npm link cmd 其中cmd就是我们的包名。...运行完此命令后,npm会帮我们在cmd-test文件夹中的node_modules目录下建立一个cmd的软链。...当然,前提是cmd-test文件夹中已经有node_modules目录,否则会一直向上找node_modules目录直到根目录位置。你也可以手动建一个。

    1.1K30

    说一说前端代码检查

    代码检查很重要,原因有三: 避免低级bug:一些常见代码问题,如果在编译或运行前不能及时发现,代码中的语法问题会直接导致编译或运行时错误,影响开发效率和代码质量; 统一代码习惯:每一个团队或个人都会有一些代码规范或者代码习惯...4.plugins 每一个ESlint插件都是一个npm包,命名以“eslint-plugin-”开头,如eslint-plugin-react或@jquery/eslint-plugin-jquery...命令行参数说明 常用的命令行如下: // 指定配置文件 eslint --config ~/my-eslint.json file.js // 关闭配置文件 eslint --no-eslintrc...命令行参数说明 这里唯一需要特别注意的两个地方是: 默认不显示warning错误,需要用—verbose参数来修改; 遇到error时默认直接退出,无法看到所有的error错误,需要用--no-exit...2.如何平衡文件配置和注释配置? 文件配置往往是团队共同商讨制定出来的,凝聚了大多数人的智慧,所以原则上应该遵守这些规则,尽量不要在代码中添加注释配置。

    1.9K70

    gulp使用教程

    第一: gulp必须在nodejs环境下运行,所以要先搭建nodejs环境。 测试nodejs是否安装正常。...命令:node -v 如果返回版本号说明安装正常 然后再 npm init 会自动生成一个package.json文件。...这个文件保存项目的相关信息 第二: npm install gulp -g 安装全局gulp 然后在项目里的根目录再安装一遍 npm install gulp –save-dev 第三: 新建一个gulpfile.js...文件 然后安装js代码检测插件,压缩文件插件,重名名插件(这里只讲一下这三个插件的使用,当然gulp还有很多强大的插件) js代码检测插件: npm install gulp-jslint –save-dev....pipe(gulp.dest("dist")); //压缩存放的路径 这里的是根目录下的 dist目录 }); 最后控制台 gulp lint 启动任务

    54840

    说一说前端代码检查

    代码检查很重要,原因有三: 避免低级bug:一些常见代码问题,如果在编译或运行前不能及时发现,代码中的语法问题会直接导致编译或运行时错误,影响开发效率和代码质量; 统一代码习惯:每一个团队或个人都会有一些代码规范或者代码习惯...4.plugins 每一个ESlint插件都是一个npm包,命名以“eslint-plugin-”开头,如eslint-plugin-react或@jquery/eslint-plugin-jquery...命令行参数说明 常用的命令行如下: // 指定配置文件 eslint --config ~/my-eslint.json file.js // 关闭配置文件 eslint --no-eslintrc...命令行参数说明 这里唯一需要特别注意的两个地方是: 默认不显示warning错误,需要用—verbose参数来修改; 遇到error时默认直接退出,无法看到所有的error错误,需要用--no-exit...2.如何平衡文件配置和注释配置? 文件配置往往是团队共同商讨制定出来的,凝聚了大多数人的智慧,所以原则上应该遵守这些规则,尽量不要在代码中添加注释配置。

    1.2K30

    【JS】308- 深入理解ESLint

    JSHint 在 JSLint 的基础上提供了丰富的配置项,给了开发者极大的自由,JSHint 一开始就保持着开源软件的风格,由社区进行驱动,发展十分迅速。...初始化 如果想在现有项目中引入 ESLint,可以直接运行下面的命令: # 全局安装 ESLint $ npm install -g eslint # 进入项目 $ cd ~/Code/ESLint-demo...经过一系列一问一答的环节后,你会发现在你文件夹的根目录生成了一个 .eslintrc.js 文件。 ?...项目级与目录级的配置 我们有如下目录结构,此时在根目录运行 ESLint,那么我们将得到两个配置文件 .eslintrc.js(项目级配置) 和 src/.eslintrc.js(目录级配置),这两个配置文件会进行合并...eqeqeq 规则校验 这里使用了命令行的配置方式,如果你只想对单个文件进行某个规则的校验就可以使用这种方式。

    1.3K50

    Dockerfile语法概要

    和ADD COPY和ADD都是用于在构建时往镜像中复制文件或目录的,并且两者都支持在复制时修改文件或目录的属主和属组,语法为 ADD [--chown=:] ......>...] 2.9 CMD和ENTRYPOINT 这个话题稍微复杂,实际上用的场景也不会有这么多 CMD CMD和ENTRYPOINT都是指定容器将如何运行 CMD的主要目的是为执行容器提供默认值...,传递给ENTRYPOINT docker run 的命令行参数将被附加在exec类型的ENTRYPOINT的所有元素之后,并将覆盖使用CMD指定的所有元素。...在docker镜像的构建过程中有构建上下文build context这一概念,通俗的来说就是指执行docker build时当前的工作目录,不管构建时有没有用到当前目录下的某些文件及目录,默认情况下这个上下文中的文件及目录都会作为构建上下文内容发送给...,在docker构建镜像时也有.dockerignore,可以用来排除当前工作目录下不需要加入到构建上下文build context中的文件 例如,在构建npm前端的镜像时项目时,在 Dockerfile

    70910

    浅谈前端工程化的发展以及相关工具介绍

    安装 bower 命令后,通过 bower install jquery ,就可 以将 jquery 下载到 bower_components 目录中,我们就可以在 html 文件加上 目录中。...npm 中 --save-dev 和 --save 之间的区别对于大型项目来说,他们的界限实际上并不清晰。真正会有差异的地方是究竟我们使用哪种方式来安装所有的依赖。...其他类目工具任务处理工具(gulp/grunt)上面我们说的所有工具都是针对某一个垂直领域来说的,比如编译、打包、压缩等等,我们需要通过不同的命令去运行和操作我们的 JS 文件。...webpack 实际上和 gulp grunt 这类的任务处理工具有些类似,但是它本身具有打包的功能,同时也支持通过中间件和插件实现其他领域的功能,最终通过一个命令就能处理完成所有操作。

    50430

    2016,NodeJS干货来袭

    第三步 使用Node命令运行weinre(NodeJS中运行工具) 3.1 依旧在Node.js command prompt(简称cmd窗口)当中进行操作 3.2 在该cmd窗口中输入:weinre...如何在weinre中运行项目呢?...如果在安装过程中没有采用-g的方式(即采用的命令是npm install weinre),那么之后要通过cd 文件路径的命令找到当前weinre项目的位置,再之后再进行运行,具体代码效果如下: ?...Node.js是干什么的呢? Node.js窗口类似于我们JavaScript的控制台,用于进行JS文件的运行(如计算)和测试。...Node.js command prompt(通常也叫Node的cmd),主要作用在于两点,一点是使用npm命令,用于安装文件;另一点是使用node命令,执行相关文件。

    1.7K70

    Docker自定义镜像-构建镜像-Dockerfile语法

    COPY COPY指令用于将文件或目录从构建上下文复制到镜像中的指定路径。...示例: COPY src/ /app/ COPY src/ /app/ 是 Dockerfile 中的 COPY 指令,用于将文件或目录从构建上下文复制到镜像中的指定路径。...下面是对该命令的参数的详细解释: src/: 这是要复制的源文件或目录的路径。在这个例子中,src/ 表示构建上下文中的 src/ 目录,也就是 Dockerfile 所在目录下的 src/ 目录。...综上所述,COPY src/ /app/ 命令的作用是将构建上下文中的 src/ 目录复制到镜像中的 /app/ 目录。这样,在运行容器时,可以访问到镜像中复制的文件或目录。...示例: CMD ["npm", "start"] CMD ["npm", "start"] 是 Dockerfile 中的 CMD 指令,用于设置容器启动时要执行的默认命令。

    15410

    Docker 搭建你的第一个 Node 项目到服务器

    ,只要没修改,就不会重新安装包 COPY package.json /usr/src/app/package.json RUN cd /usr/src/app/ RUN npm i # 把当前目录下的所有文件拷贝到...CMD 否则后面的会被覆盖,CMD 后面的命令是容器每次启动执行的命令,多个命令之间可以使用 && 链接,例如 CMD git pull && npm start 详细说明:CMD 指令用来在启动容器的时候...它有两种形式 CMD echo 1 CMD ["npm", "run", "test"] 必须是双引号 第一种执行的命令会被包装程,CMD [ "sh", "-c", "echo 1" ] JSON 数组形式...最后一个.也不要省略,表示 Dockerfile 文件的所在目录, 代表是当前路径,它指定镜像构建的上下文。...这样当我们要在 Dockerfile 文件中执行 如 COPY 指令,就可以将上下文中的文件复制到镜像中去了。

    1.4K10

    3.Docker学习之Dockerfile

    WeiyiGeek.dockerfile 在编写完成Dockerfile之后可以通过docker build 命令来创建镜像,该命令读取指定路径下(包括子目录)的dockerfile(实际上是构建上下文...5)CMD- 容器启动时执行指令 描述:指令用于执行目标镜像中包含的软件和任何参数, 实际上为容器提供一个默认的执行命令。...描述:COPY只支持简单将本地文件拷贝到容器中它比 ADD 更透明,所以ADD和COPY功能类似但一般优先使用 COPY ; COPY 指令将从构建上下文目录中 的文件/目录复制到新的一层的镜像内的...而 docker build 命令构建镜像,其实并非在本地构建,而是在服务端也就是 Docker 引擎中构建的;用户会指定构建镜像上下文的路径,docker build 命令得知这个路径后,会将路径下的所有内容打包...在什么地方,当前目录中的所有文件内容都将作为构建上下文发送到 Docker 守护进程中去。

    1.8K20

    3.Docker学习之Dockerfile

    )的dockerfile(实际上是构建上下文Context),并将该路径下的内容发送给Docker服务端由它创建镜像; 因此一般建议放置Dockerfile的目录为空另外可以通过dockerignore..., 实际上为容器提供一个默认的执行命令。...描述:COPY只支持简单将本地文件拷贝到镜像中它比 ADD 更透明,所以ADD和COPY功能类似但一般优先使用 COPY ; COPY 指令将从构建上下文目录中 的文件/目录复制到新的一层的镜像内的...而 docker build 命令构建镜像,其实并非在本地构建,而是在服务端也就是 Docker 引擎中构建的;用户会指定构建镜像上下文的路径,docker build 命令得知这个路径后,会将路径下的所有内容打包...在什么地方,当前目录中的所有文件内容都将作为构建上下文发送到 Docker 守护进程中去。

    1.3K20

    npm run dev 后 webpack-dev-server 做了哪些事情

    在终端执行npm run dev,拿windows来说实际上调用的是 node_modules下的 .bin 文件夹下的 npm.cmd 的批处理命令。...在终端执行npm run dev,拿windows来说实际上调用的是 node_modules下的 .bin 文件夹下的 npm.cmd 的批处理命令。...运行 npm run dev 之后,会在 npm-cli 中找到 webpack-dev-server.cmd ,如下: 下面针对webpack-dev-server.cmd的批处理程序进行解析说明:...,避免直接显示在命令行窗口 rem %* 表示命令行中的所有参数,当要将命令从批处理文件转发到另一个程序时会用到 在其中有两处比较难理解的地方单独说明: goto #_undefined_#:它利用一个致命错误...代码的其余部分使用命令行上下文而不是批处理上下文执行。

    1.8K40

    ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序

    自动运行任务,如LESS、JavaScript压缩、JSLint、JavaScript单元测试等。 方便的获得Web开发者生态圈的工具包。...npm (Node Package Manager). npm是一个node包管理器,最初被用于Node.js包管理。上面说的Bower、Grunt、Gulp用到了npm。...静态文件和wwwroot wwwroot 文件夹在ASP.NET 5.0中是新增的,工程中所有的静态文件存放于此。...wwwroot文件夹是网站的根目录,如这个域名http://hostname/指向wwwroot文件夹。...使用Grunt运行任务调度 使用gruntfile.js 文件来定义Grunt任务,默认的工程模板包括了这样的任务,如Bower包管理器。 下面我们使用Grunt来添加LESS处理、编译过程。

    3.7K70

    Docker--DockerFile与镜像

    这只是默认行为,实际上 Dockerfile 的文件名并不要求必须为 Dockerfile ,而且并不要求必须位于上下文目录中,比如可以用 -f .....我们最好在一组命令的最后添加清理工作的命令,删除了为了编译构建所需要的软件,清理了所有下载、展开的文件,并且还清理了 apt 缓存文件。...为了防止运行时用户忘记将动态文件所保存目录挂载为卷,在 Dockerfile 中,我们可以事先指定某些目录挂载为匿名卷,这样在运行时如果用户不指定挂载,其应用也可以正常运行,不会向容器存储层写入大量数据...当构建的时候,用户会指定构建镜像上下文的路径也就是PATH | URL  部分, docker build 命令得知这个路径后,会将路径下的所有内容打包,然后上传给 Docker 引擎。...举个例子,在 Ubuntu 14.04 基础镜像中运行 RUN apt-get upgrade 会在保留基础层的同时再创建一个新层来放所有新的文件,而不是修改老的文件,因此,新的镜像大小会超过直接在老的文件系统上做更新时的文件大小

    95740
    领券