javascript 代码格式化-ESlint + Stylelint + VSCode 手册低级代码（2023）

bendan520 javascript

2023-12-12 0 918 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

eslint格式化代码

本文使用Vue项目作为演示。

安装插件ESLint，然后File -> Preference -> Settings（如果安装了英文插件包javascript 代码格式化，应该是File -> Options -> Settings），搜索eslint，点击setting.json中的Edit

在配置文件中添加以下选项

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

同时确保VSCode右下角状态栏中的ESlint处于工作状态。如果你看不到右下角的Eslint标志javascript 代码格式化，请按照上面的步骤打开setting.json并添加这行代码：

"eslint.alwaysShowStatus": true,

配置完成后，VSCode会根据你当前项目下的.eslintrc文件的规则对代码进行验证和低码。

下载插件

npm i -D eslint eslint-config-airbnb-vue3-ts

添加 .eslintrc 文件。具体配置项为：

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true,
        jest: true,
    },
    extends: ['eslint-config-airbnb-vue3-ts'],
    rules: {
        
    },
}

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

"scripts": {
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
},

修改后，js ts vue 文件现在可以手动缩小。

stylelint 格式化代码

下载依赖项

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

在项目根目录下新建.stylelintrc.js文件，输入以下内容：

module.exports = {
    extends: [
        'stylelint-config-standard-scss',
    ],
    rules: {
        indentation: 4,
        'media-feature-range-notation': null,
        'alpha-value-notation': ['number'],
        'color-function-notation': ['legacy'],
        'no-descending-specificity': null,
        'font-family-no-missing-generic-family-keyword': null,
        'selector-type-no-unknown': null,
        'at-rule-no-unknown': null,
        'no-duplicate-selectors': null,
        'no-empty-source': null,
        'selector-class-pattern': null,
        'selector-pseudo-class-no-unknown': [
            true,
            { ignorePseudoClasses: ['global', 'deep'] },
        ],
        'scss/at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['tailwind'],
            },
        ],
    },
};

VSCode 添加 stylelint 插件：

然后就可以看到效果了。

如果你想更改插件的默认规则，可以查看官方文档，其中提供了 170 条规则更改。

扩张

如何格式化 HTML 文件中的代码？这就需要借助VSCode自带的低格式了。快捷键是shift+alt+f。假设 VSCode 当前打开了一个 HTML 文件，按 shift + alt + f 会提示您选择低格式规范。如果没有提示，说明已经有默认的低格式规范，那么HTML文件中的所有代码都将是低格式的，低格式规则可以自己配置。

.vue 文件中的 HTML 模板验证规则将被忽略并且无效。

例如，如果将 HTML 模板每行的代码文本粗细设置为 100，则超过此宽度时 eslint 会报错。如果此时还想超过这个宽度，可以选择忽略这条规则：