美文网首页
前端规范

前端规范

作者: 小马将过河 | 来源:发表于2022-03-27 11:09 被阅读0次

javascript的规范推荐的是:https://github.com/lin-123/javascript

本文抄一下怎么配置项目和开发工具里的代码自动检查工具。公欲利其事,必先利其器嘛。

ESLint

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

  1. 下载依赖
// eslint-config-airbnb-base 使用 airbnb 代码规范
npm i -D babel-eslint eslint eslint-config-airbnb-base eslint-plugin-import

  1. 配置 .eslintrc 文件
{
    "parserOptions": {
        "ecmaVersion": 2019
    },
    "env": {
        "es6": true,
    },
    "parser": "babel-eslint",
    "extends": "airbnb-base",
}

  1. package.jsonscripts 加上这行代码 "lint": "eslint --ext .js test/ src/"。然后执行 npm run lint 即可开始验证代码。代码中的 test/ src/ 是要进行校验的代码目录,这里指明了要检查 testsrc 目录下的代码。

不过这样检查代码效率太低,每次都得手动检查。并且报错了还得手动修改代码。

为了改善以上缺点,我们可以使用 VSCode。使用它并加上适当的配置可以在每次保存代码的时候,自动验证代码并进行格式化,省去了动手的麻烦(下一节讲如何使用 VSCode 自动格式化代码)。

Stylelint

Stylelint 是一个开源的、用于检查 CSS 代码格式的开源工具。具体如何使用请看下一节。

使用 VSCode 自动格式化代码

格式化 JavaScript 代码

安装 VSCode,然后安装插件 ESLint。

image

选择 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

在这里插入图片描述

将以下选项添加到配置文件

"editor.codeActionsOnSave": {
    "source.fixAll": true,
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
],
"eslint.alwaysShowStatus": true,
"stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "vue",
    "sass"
],

同时要确保 VSCode 右下角的状态栏 ESlint 是处于工作状态的。如果右下角看不到 Eslint 的标识,请按照上面讲过的步骤打开 setting.json,加上这行代码:

"eslint.alwaysShowStatus": true,

image

配置完之后,VSCode 会根据你当前项目下的 .eslintrc 文件的规则来验证和格式化代码。

image.png

TypeScript

下载插件

npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc 配置文件,添加以下两个配置项:

"parser": "@typescript-eslint/parser",
"plugins": [
    "@typescript-eslint"
],

在根目录下的 package.json 文件的 scripts 选项里添加以下配置项:

"scripts": {
  "lint": "eslint --ext .js,.ts,.tsx test/ src/",
},

test/ src/ 是你要校验的目录。修改完后,现在 ts 文件也可以自动格式化了。

image

如果你使用 Vue-CLI 创建项目,并且想要格式化 TypeScript 的代码,则需要在 .eslintrc.js 文件添加或修改以下几项:

parser: 'vue-eslint-parser',
plugins: [
    '@typescript-eslint',
],
parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
},

这样就可以格式化 .js .ts .vue 文件了。

格式化 CSS 代码

下载依赖

npm install --save-dev stylelint stylelint-config-standard

在项目根目录下新建一个 .stylelintrc.js 文件,并输入以下内容:

module.exports = {
    extends: "stylelint-config-standard"
}

VSCode 添加 stylelint 插件:

在这里插入图片描述

然后就可以看到效果了。

在这里插入图片描述

如果你想修改插件的默认规则,可以看官方文档 (opens new window),它提供了 170 项规则修改。例如我想要用 4 个空格作为缩进,可以这样配置:

module.exports = {
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": 4
    }
}

如果你想格式化 sass scss 文件,则需要下载 stylelint-scss stylelint-config-standard-scss 插件:

npm i -D stylelint-scss stylelint-config-standard-scss

注意,要把 stylelint-config-standard 改成 stylelint-config-standard-scss,然后就可以格式化 scss 文件了。

module.exports = {
    extends: "stylelint-config-standard-scss"
}

扩展

如何格式化 HTML、Vue(或其他后缀) 文件中的 HTML 代码?

.vue 文件的 HTML 代码可以使用 eslint-plugin-vue 插件来进行格式化:

extends: [
'plugin:vue/recommended', // 在 .eslintrc.js 文件中加上这一行代码
'@vue/airbnb',
],
其他的 HTML 文件需要利用 VSCode 自带的格式化,快捷键是 shift + alt + f。假设当前 VSCode 已经打开了一个 HTML 文件,按下 shift + alt + f 会提示你选择一种格式化规范。如果没提示,那就是已经有默认的格式化规范了,然后 HTML 文件的所有代码都会格式化,并且格式化规则还可以自己配置。

踩坑

Unknown word (CssSyntaxError) 错误

这个问题主要是因为 stylelint 升级到 14 大版本造成的。

解决方案一

安装 stylelint 新的相关依赖:

npm i -D stylelint-config-recommended-vue stylelint-config-standard-scss postcss-html

然后修改 .stylelintrc.js 文件的配置项:

extends: [
    'stylelint-config-standard-scss', 
    'stylelint-config-recommended-vue',
    'stylelint-config-recommended-vue/scss',
],
customSyntax: 'postcss-html',

这样修改以后,就不会再报错了。

解决方案二

第二个解决方案就是将以上三个插件的版本降一个大版本就好了,最后的版本如下:

"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0",

同时需要将 VSCode 的 stylelint 插件降级,现在插件的最新版本是 1.0.3,不支持 stylelint 13 版本。点击插件旁边的小齿轮,再点 Install Another Version,选择其他版本进行安装。

image.png

0.87.6 版本安装就可以了,这时 css 自动格式化功能恢复正常。

#忽略 .vue 文件中的 HTML 模板验证规则无效

举个例子,如果你将 HTML 模板每行的代码文本长度设为 100,当超过这个长度后 eslint 将会报错。此时如果你还是想超过这个长度,可以选择忽略这个规则:

/* eslint-disable max-len */

注意,以上这行忽略验证的代码是不会生效的,因为这个注释是 JavaScript 注释,我们需要将注释改为 HTML 格式,这样忽略验证才会生效:

<!-- eslint-disable max-len -->

#

相关文章

  • 移动前端开发规范(一般规范)

    系列目录 移动前端开发规范(一般规范)移动前端开发规范(技术栈规范)移动前端开发规范(HTML规范)移动前端开发规...

  • 我的前端规范——CSS篇

    相关文章 博客原文我的前端规范——开篇我的前端规范——HTML篇我的前端规范——CSS篇我的前端规范——JavaS...

  • 我的前端规范——HTML篇

    相关文章 博客原文我的前端规范——开篇我的前端规范——HTML篇我的前端规范——CSS篇我的前端规范——JavaS...

  • 我的前端规范——JavaScript篇

    相关文章 博客原文我的前端规范——开篇我的前端规范——HTML篇我的前端规范——CSS篇我的前端规范——JavaS...

  • 我的前端规范——开篇

    相关文章 博客原文我的前端规范——开篇我的前端规范——HTML篇我的前端规范——CSS篇我的前端规范——JavaS...

  • 前端开发规范(实验室版)

    前端编码规范—— HTML 篇 前端编码规范—— CSS 篇 前端编码规范—— JavaScript 篇 这几天和...

  • 前端入门必知开发规范

    本文主要从以下几个方面来概述前端的开发规范 1. 目录构建规范 2. 前端命名规范 3. 前端工作规范 4. 开发...

  • web前端的开发规范比较重要的知识点

    本文主要从以下几个方面来概述前端的开发规范 1. 目录构建规范 2. 前端命名规范 3. 前端工作规范 4. 开发...

  • 好程序员web前端分享前端的开发规范

    本文好程序员主要从以下几个方面来概述前端的开发规范 1.目录构建规范 2.前端命名规范 3.前端工作规范 4.开发...

  • 前端规范

    前端规范 规范说明 此为前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性。此规范为参考规范,统...

网友评论

      本文标题:前端规范

      本文链接:https://www.haomeiwen.com/subject/znaejrtx.html