【学习总结】初级前端程序员使用eslint和prettier结合，快速实现自动规范代码，傻瓜教程

初始化

• npm init -y 初始化包
• npm i eslint -g 全局安装eslint (下次就不用安装了)
• npx eslint --init 初始化eslint

安装eslint-plugin-prettier

• npm i eslint @vue/eslint-config-prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier -D

配置.eslintrc.js

module.exports = {
    env:{
        browser:true,
        es2021:true,
        node:true,
    },
    extends:["@vue/prettier","plugin:vue/vue3-essential","eslint:recommended"],
    parserOptions:{
       ecmaVersion:13,
       sourceType:"module",
    },
    plugins:["vue"],
    rules:{
      "prettier/prettier":"warn",
    },
}

配置.prettierrc.js，配置自己喜欢的代码风格（要重启）

module.exports = {
    printWidth:120,
    tabWidth:4,
    useTabs:false,
    singleQuote:true,
    semi:true,
    trailingComma:"es5",
    bracketSpacing:true,
    jsxBracketSameLine:false,
    arrowParens:"aviod",
    endOfLine:"auto",
}

• 属性解释

手动改错

• package.json配置

• npm run lint 手动查错
• npm run fix 手动改错

保存自动改错

• 安装ESLint插件
• 配置VS Code设置文件setting.json

"editor.formatOnType":true,
"editor.formatOnSave":true,
"eslint.codeAction.showDocumentation":{
"enable":true
},
"editor.codeActionsOnSave":{
"source.fixAll.eslint":true,
},
"eslint.validate":["javascript","javescriptreact","html","vue"],

学习资料来源