當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

VS Code 自动修改和保存代码风格 == eslint+prettier

發(fā)布時間：2023/12/20 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 VS Code 自动修改和保存代码风格 == eslint+prettier 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

??? 最近因?yàn)橛玫絍S Code，需要統(tǒng)一所有人的代碼風(fēng)格（前端語言js/html/css等，或者后端語言 go/python等也可以這么用）。

所以參考了一些網(wǎng)絡(luò)資料，記錄下設(shè)置步驟，以便后續(xù)查閱。

Step 1: npm 命令窗口，安裝需要的插件

cmd >> npm i -D prettier

# eslint-plugin-prettier插件會調(diào)用prettier對你的代碼風(fēng)格進(jìn)行檢查，其原理是先使用prettier對你的代碼進(jìn)行格式化，

# 然后與格式化之前的代碼進(jìn)行對比，如果過出現(xiàn)了不一致，這個地方就會被prettier進(jìn)行標(biāo)記。

cmd >> npm i -D eslint-plugin-prettier

# eslint-config-prettier可以關(guān)閉eslint可能與prettier發(fā)生沖突的代碼格式化規(guī)則。

# 官方稱eslint-plugin-prettier需要與eslint-config-prettier搭配食用才能獲得最佳效果。

cmd >> npm i -D eslint-config-prettier

Step 2: 創(chuàng)建react項(xiàng)目

cmd >> cd H:\0_VSCode_Work

cmd >> create-react-app my-app-03

# 打開項(xiàng)目

cmd >> cd ./my-app-03

cmd >> code .

Step 3: 創(chuàng)建項(xiàng)目的.eslintignore文件

# 文件路徑 = MY-APP-03/.eslintignore

# 在vs code中手動創(chuàng)建文件后".eslintignore"，輸入如下文件內(nèi)容。

/build/ /config/ /dist/ /*.js /test/unit/coverage/

Step 4: 創(chuàng)建項(xiàng)目的.eslintrc.js文件

# 文件路徑 = MY-APP-03/src/.eslintrc.js

# 在vs code中手動創(chuàng)建文件后".eslintrc.js"，輸入如下文件內(nèi)容。

module.exports = {root: true,env: {browser: true,es6: true,node: true},extends: ['standard','plugin:vue/essential','eslint:recommended',"plugin:prettier/recommended"],rules: {"prettier/prettier": "error",// allow async-await'generator-star-spacing': 'off','no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',//強(qiáng)制使用單引號quotes: ['error', 'single'],//強(qiáng)制不使用分號結(jié)尾semi: ['error', 'never']},parserOptions: {parser: 'babel-eslint'} }

Step 5: 創(chuàng)建項(xiàng)目的.prettierrc文件

# 文件路徑 = MY-APP-03/.prettierrc

# 在vs code中手動創(chuàng)建文件后".prettierrc"，輸入如下文件內(nèi)容。

{//一行的字符數(shù)，如果超過會進(jìn)行換行，默認(rèn)為80"printWidth": 80, //一個tab代表幾個空格數(shù)，默認(rèn)為80"tabWidth": 2, //是否使用tab進(jìn)行縮進(jìn)，默認(rèn)為false，表示用空格進(jìn)行縮減"useTabs": false, //字符串是否使用單引號，默認(rèn)為false，使用雙引號"singleQuote": false, //行位是否使用分號，默認(rèn)為true"semi": true, //是否使用尾逗號，有三個可選值"<none|es5|all>""trailingComma": "none", //對象大括號直接是否有空格，默認(rèn)為true，效果：{ foo: bar }"bracketSpacing": true, //代碼的解析引擎，默認(rèn)為babylon，與babel相同"parser": "babylon", //開啟 eslint 支持"eslintIntegration": true }

Step6 : 修改項(xiàng)目工作區(qū)設(shè)置文件.vscode/settings.json

# 單擊IDE工具的左下角的齒輪，然后單擊菜單"Settings", 在彈出的面板Settings中，選擇子面板"Workspace"，如下圖

# 然后，找到參數(shù)"Files:Associations"，單擊按鈕"Edit in setting.json"

# 然后，在settings.json文件中，輸入和保存如下內(nèi)容。

{//.vue文件template格式化支持，并使用js-beautify-html插件"vetur.format.defaultFormatter.html": "js-beautify-html",//js-beautify-html格式化配置，屬性強(qiáng)制換行"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned"}},//根據(jù)文件后綴名定義vue文件類型"files.associations": {"*.vue": "vue"},//配置 ESLint 檢查的文件類型"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],//保存時eslint自動修復(fù)錯誤"eslint.autoFixOnSave": true,//保存自動格式化"editor.formatOnSave": true }

或者，少設(shè)置一些參數(shù)，如下

最后，記得保存settings.json文件

Step7 : 最后，我們測試一下效果

# 首先，創(chuàng)建一個demo.html文件，如下

文件路徑 = MY-APP-03/public/demo.html

# 然后，我們單擊快捷鍵"Ctrl+S" 或菜單"Fiel >> Save All", 則IDE工具自動將上面格式混亂的代碼轉(zhuǎn)化為風(fēng)格整潔的代碼，如下圖所示

轉(zhuǎn)載于:https://www.cnblogs.com/itshare/p/11028299.html

總結(jié)

以上是生活随笔為你收集整理的VS Code 自动修改和保存代码风格 == eslint+prettier的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

编程问答

VS Code 自动修改和保存 代码风格 == eslint+prettier

總結(jié)

VS Code 自动修改和保存代码风格 == eslint+prettier