首页
学习
活动
专区
圈层
工具
发布

说一说前端代码检查

代码检查很重要,原因有三: 避免低级bug:一些常见代码问题,如果在编译或运行前不能及时发现,代码中的语法问题会直接导致编译或运行时错误,影响开发效率和代码质量; 统一代码习惯:每一个团队或个人都会有一些代码规范或者代码习惯...通常,代码编辑器(或IDE)的插件会帮我们做一些静态语法检查的工作,但是如何自定义语法规则,如何集成到开发流程中,仍然需要我们花一些时间去了解。...4.plugins 每一个ESlint插件都是一个npm包,命名以“eslint-plugin-”开头,如eslint-plugin-react或@jquery/eslint-plugin-jquery.../test/test.html //修复部分问题 eslint --fix 规则优先级 优先级:注释配置 > 命令行配置 > 文件配置 工具集成 编辑器:Sublime Text 3、Atom、Visual...一点心得 1.如何在一个项目中引入一套ESLint或SassLint?

2K70

说一说前端代码检查

代码检查很重要,原因有三: 避免低级bug:一些常见代码问题,如果在编译或运行前不能及时发现,代码中的语法问题会直接导致编译或运行时错误,影响开发效率和代码质量; 统一代码习惯:每一个团队或个人都会有一些代码规范或者代码习惯...通常,代码编辑器(或IDE)的插件会帮我们做一些静态语法检查的工作,但是如何自定义语法规则,如何集成到开发流程中,仍然需要我们花一些时间去了解。...4.plugins 每一个ESlint插件都是一个npm包,命名以“eslint-plugin-”开头,如eslint-plugin-react或@jquery/eslint-plugin-jquery.../test/test.html //修复部分问题 eslint --fix 规则优先级 优先级:注释配置 > 命令行配置 > 文件配置 工具集成 编辑器:Sublime Text 3、Atom、Visual...一点心得 1.如何在一个项目中引入一套ESLint或SassLint?

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

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

    但是,那个时候 ESLint 并没有大火,因为需要将源代码转成 AST,运行速度上输给了 JSHint ,并且 JSHint 当时已经有完善的生态(编辑器的支持)。...该编辑器插件会读取当前项目中的 .eslintrc.js 的配置,并在编辑器中把不符合规则的错误给提示出来。...这样一来,开发时就能有错误提示,根据提示修改就好了,但我们之前提到运行 npm run eslint 可以通过 --fix 参数来自动修复可以修复的问题,譬如格式问题,let 改成 const 等这些问题...那在开发时,是否也可以对于检测出来的错误自动修复呢? 三种方案,可以根据自喜好选择: 设置保存时自动修复。 调出 VS Code 编辑器的命令面板,找到 ESLint 插件提供的修复命令。...示例中配置表示的是,对当前改动的 .js 和 .vue 文件在提交时进行检测和自动修复,自动修复完成后 add 到 git 暂存区。如果有无法修复的错误会报错提示。

    3.1K52

    哪些JavaScript IDE最好用?

    集成Node.js WebStorm 集成Node.js ,可以运行,编译,测试Node.js App。 4.  集成代码质量工具 集成了JSHint,JSLint,JSCS 等。 5....缺点:商用付费,偶尔性能较差,后台会创建.idea 文件,一个窗口中无法打开多个项目,非原生文件系统经常会出现很多问题 Atom 优点: 内置包管理功能 Atom内置包管理功能,是Atom最重要的功能特征...开源免费 Atom 在GitHub上是开源的,并且是免费的 内嵌Git 控件,Web技术 内嵌Web 技术如JS,HTML及CSS 缺点:效率低 Sublime Text ?...缺点:效率低,同一时间只能打开一个文件。功能不全,缺少静态内核分析功能,也缺少一些元素级别的文本编辑命令。 Codenvy ? 开发人员使用Codenvy可以修改,运行,编译云端代码。...能够提供自定义运行时环境,调试代码;能够将工作进度共享,且安装非常便捷。

    2.7K50

    代码规范之-理解ESLint、Prettier、EditorConfig

    支持多种文件格式 编辑器读取到文件格式会匹配并遵循配置文件定义的规则; 就近原则 打开文件时,EditorConfig插件会在打开的文件的目录中以及每个父目录中查找名为.editorconfig的文件。...JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。...工具相当于为js增加了编译过程,在代码部署运行前进行静态分析,找到出错的地方和不规范的代码。...如果你正在使用GIt做项目代码管理,那么则可以借助husky + lint-staged + Prettier 在Git提交时,自动强制校验并格式化且修复代码,而且只处理自己本次改动提交的文件。...安装eslint-plugin-prettier插件,先使用Prettier对代码进行格式化,再并对不一致的地方进行标记; 这两个包配合使用,可以达到运行 eslint \--fix 时,采用Prettier

    3.5K30

    Top 10 JavaScript编辑器,你在用哪个?

    Sublime Text 如果你想要一个灵活、强大、可扩展的文本编辑器,它能够如闪电般快速运行,并且支持切换到其它窗口进行代码检查、调试和部署,那么可以考虑使用Sublime Text。...此外,Visual Studio Code可以与外部任务运行程序(如gulp和jake)进行可定制的集成。...Atom是Chromium浏览器的一个特殊的存在,它被设计成一个文本编辑器而不是一个Web浏览器; 每个Atom窗口本质上都是一个本地呈现的网页。 当Atom不自动更新时,性能是非常好的。...Atom可以安装两个命令行实用程序:Atom,用于从shell启动编辑器;APM,用于管理Atom的软件包。...Emacs作为JavaScript编辑器,编辑JavaScript的默认模式是在js包中,使用Emacs可以获得更好的语法高亮和linting。

    4.1K10

    React Native开发之ATOM开发实用技巧

    ATOM常用插件 1、simplified-chinese-menu Atom的简体中文语言包,完整汉化,兼容所有已发布的版本Atom。...通过jshint能发现代码中存在的问题,可以及时避免bug的发生。...linter-jshint插件基于atom规则来使用jshint,该插件可以在项目根目录下新建一个.jshintrc来告诉检查规则,也可以不用创建此文件来进行代码检查。...注意:linter-jshint是依赖linter插件来使用的,也就是说必须先安装linter插件;因为linter是一个粗糙的检查,有很多针对专门项的代码检查,如linter-csslint、linter-php...10、atom-ternjs 该插件能对一个对象中拥有的对外提供的属性和方法都能通过suggest的形式提示出来,能对一个对象对外提供的接口有一个选择过程,可以理解为js代码自动提示。

    1.2K80

    这些必备的VSCode JavaScript插件你都用过吗?

    前言 如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。...这里有一些: JavaScript Atom Grammar(它用Atom编辑器里的JavaScript语法高亮替换VS Code原来的。)...JSHint(基于JSHint的代码检测插件。在项目跟目录下使用.jshintrc文件作为其配置。)...View Node Package(利用此插件可快速查看Node包源码,让你直接在VS Code中打开Node包的代码库或文档。)...这里有一些工具,能极大地减少你开发时的这种重复流程,而不是每次都手动刷新浏览器: 1. Debugger for Chrome(在编辑器中打断点,让你轻松地在Chrome里调试JavaScript。

    6.4K10

    前端代码质量—怎样实现一个支持多语言、高扩展性的 Linter

    而根据 Lint 工具运行环境的不同,展现的形式也不一样。...包括: 收集要检查的代码(文件或者字符串) 收集配置 根据配置收集和准备规则 准备解析器 将代码解析为 AST 将 AST 传递给规则 规则返回诊断 显示诊断 必要时进行自动修复 引擎会不断重复这些过程...Application ---- 命令行 MyLint 提供的 my-lint 命令可以在命令行中检查当前目录下的所有文件或者指定模式匹配的文件或者单个文件,可选输出错误的级别或者格式。...集成开发环境 有了 Node.js API,可以支持任何 IDE 下的实时代码检测功能,配合编辑器保存时自动格式化、命令行工具以及 Git Hooks,可以让开发者在编写代码时就可以写出符合规范的代码。...Node.js API 理论上可支持 VSCode、Sublime Text、Atom、WebStorm 等 IDE。

    1.3K10

    前端代码质量—怎样实现一个支持多语言、高扩展性的 Linter

    而根据 Lint 工具运行环境的不同,展现的形式也不一样。...包括: 收集要检查的代码(文件或者字符串) 收集配置 根据配置收集和准备规则 准备解析器 将代码解析为 AST 将 AST 传递给规则 规则返回诊断 显示诊断 必要时进行自动修复 引擎会不断重复这些过程...Application ---- 命令行 MyLint 提供的 my-lint 命令可以在命令行中检查当前目录下的所有文件或者指定模式匹配的文件或者单个文件,可选输出错误的级别或者格式。...集成开发环境 有了 Node.js API,可以支持任何 IDE 下的实时代码检测功能,配合编辑器保存时自动格式化、命令行工具以及 Git Hooks,可以让开发者在编写代码时就可以写出符合规范的代码。...Node.js API 理论上可支持 VSCode、Sublime Text、Atom、WebStorm 等 IDE。

    1.5K20

    作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

    如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。...这里有一些: JavaScript Atom Grammar:它用Atom编辑器里的JavaScript语法高亮替换VS Code原来的。...JSHint:基于JSHint的代码检测插件。在项目跟目录下使用.jshintrc文件作为其配置。...View Node Package:利用此插件可快速查看Node包源码,让你直接在VS Code中打开Node包的代码库或文档。...这里有一些工具,能极大地减少你开发时的这种重复流程,而不是每次都手动刷新浏览器: Debugger for Chrome:在编辑器中打断点,让你轻松地在Chrome里调试JavaScript。

    3.4K10

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

    我们的样式,都将从 src/style/style.scss 这个文件中引用,因此,在 App.vue 这个文件中,直接引用 ./style/style 即可。...调整 router 路由文件 现在,这个项目还跑不起来呢,如果你运行 npm run dev 还是会出错的。因为我们还没有配置路由。...另外,我是使用 Atom 编辑器来编写代码的。...关于如何在 Atom 编辑器里面开启代码检查,请参看我另外一篇博文 《Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验》 即便你可能遇到一些问题...但是我希望你还是能够顺利的跑起来,得到如下的结果: 如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

    90190

    Atom的一些操作

    Linter Jshint    帮助你编写专业的js代码,js开发者必备插件。 language-vue .vue文件代码高亮,安装完可能只有标签高亮,设置如下,即可全部代码高亮。...基本使用 命令面板 Atom的很多功能学习和参考了其他优秀的编辑器, 命令面板就是其一. ...当你第一次看到它时, 还以为在用Sublime呢  命令面板是Atom中最常用的功能之一, 当你在编辑器中使用快捷键Ctrl+Shift+P时, 就会看到它  在控制面板中可以输入Atom中和插件中定义的所有命令...使用快捷键Ctrl+, 在设置窗口中可以设置和管理各种编辑器行为, 键盘快捷键, 插件, 主题等内容 设置窗口界面主题和代码高亮 Atom自带了4种窗口主题和8种代码高亮方式  可以通过设置窗口中的Themes...  如果要切换目录树栏的显示与隐藏可以使用快捷键Ctrl+\或输入命令Tree View:Toggle  目录树中右键菜单中还能实现文件的复制粘贴等功能 查找文件 当打开一个或多个目录时,你可以:  *

    82530

    学习 React Native for Android:环境搭建

    Atom 是 Github 所推出的一个开源编辑器,其最大的特点是使用 node.js 来作为其插件语言。 到Atom的官网下载 Atom 并安装。...还可以根据你的需求安装其他的一些插件,这里推荐一些插件: react:React 的语法补全和智能重排; react-snippets:React 的代码段; highlight-selected:高亮当前双击选中的标记; jshint...:让 Atom 记住上一次打开的会话; browser-plus:在 Atom 中内嵌一个浏览器窗口,方便页面调试(其实 Atom 本身就是一个浏览器); minimap:如果你对 Sublime Text...但要注意,Atom 目前的性能还比较差强人意,安装太多的插件会影响整个编辑器的启动速度,所以建议只安装必需的插件。...run-ios" 完成后重新打开终端,即可使用 rna 命令运行 React Native for Android 项目,用 rni 命令运行 React Native for iOS 项目。

    1.8K20

    Python IDE 详细攻略,拿去吧你~

    在涉及人工智能和机器学习时,它被认为是最好的 Python IDE。最重要的是,Pycharm 合并了多个库(如 Matplotlib 和 NumPy),帮助开发者探索更多可用选项。...缺点: 用户可能需要多花一点时间,来学习该编辑器的复杂自定义过程。 使用上比其他一些 IDE 要复杂一些。...允许用户在编辑器中搜索和替换文件。 缺点: 不支持复制到库。 脚本不能超过 100 行代码。...# Atom 下载地址:https://atom.io/ Atom 是一个开源编辑器,可与几乎所有编程语言兼容,如 PHP、Java。它定期更新、可信赖,且具备通用性。...Github 为 Atom 开发了强大的功能,以提供良好的编程体验,包括多个插件,如 SQL queries 包、Markdown Preview Plus 包,以及编辑、可视化和渲染 LaTeX 公式的包

    2K10

    常用 Python IDE优缺点对比

    在涉及人工智能和机器学习时,它被认为是最好的 Python IDE。最重要的是,Pycharm 合并了多个库(如 Matplotlib 和 NumPy),帮助开发者探索更多可用选项。...缺点: 用户可能需要多花一点时间,来学习该编辑器的复杂自定义过程。 使用上比其他一些 IDE 要复杂一些。...允许用户在编辑器中搜索和替换文件。 缺点: 不支持复制到库。 脚本不能超过 100 行代码。...Atom 下载地址:https://atom.io/ Atom 是一个开源编辑器,可与几乎所有编程语言兼容,如 PHP、Java。它定期更新、可信赖,且具备通用性。...Github 为 Atom 开发了强大的功能,以提供良好的编程体验,包括多个插件,如 SQL queries 包、Markdown Preview Plus 包,以及编辑、可视化和渲染 LaTeX 公式的包

    61110

    哪种Python IDE最适合你?这里有一份优缺点列表

    在涉及人工智能和机器学习时,它被认为是最好的 Python IDE。最重要的是,Pycharm 合并了多个库(如 Matplotlib 和 NumPy),帮助开发者探索更多可用选项。...缺点: 用户可能需要多花一点时间,来学习该编辑器的复杂自定义过程。 使用上比其他一些 IDE 要复杂一些。...允许用户在编辑器中搜索和替换文件。 缺点: 不支持复制到库。 脚本不能超过 100 行代码。...Atom 下载地址:https://atom.io/ ? Atom 是一个开源编辑器,可与几乎所有编程语言兼容,如 PHP、Java。它定期更新、可信赖,且具备通用性。...Github 为 Atom 开发了强大的功能,以提供良好的编程体验,包括多个插件,如 SQL queries 包、Markdown Preview Plus 包,以及编辑、可视化和渲染 LaTeX 公式的包

    1.5K20

    哪种Python IDE最适合你?这里有一份优缺点列表

    在涉及人工智能和机器学习时,它被认为是最好的 Python IDE。最重要的是,Pycharm 合并了多个库(如 Matplotlib 和 NumPy),帮助开发者探索更多可用选项。...缺点: 用户可能需要多花一点时间,来学习该编辑器的复杂自定义过程。 使用上比其他一些 IDE 要复杂一些。...允许用户在编辑器中搜索和替换文件。 缺点: 不支持复制到库。 脚本不能超过 100 行代码。...Atom 下载地址:https://atom.io/ ? Atom 是一个开源编辑器,可与几乎所有编程语言兼容,如 PHP、Java。它定期更新、可信赖,且具备通用性。...Github 为 Atom 开发了强大的功能,以提供良好的编程体验,包括多个插件,如 SQL queries 包、Markdown Preview Plus 包,以及编辑、可视化和渲染 LaTeX 公式的包

    2.6K20
    领券